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Effects 
jQuery UI 在 jQuery 内 置 的 特效 上 添加 了 一 些 功能 。jQuery Ul 支持 颜色 动画 和 Class 转换 ， 


同时 也 提供 了 一 些 额外 的 Easings。 另外 ， 提 供 了 一 套 完整 的 定制 特效 ， 供 显示 和 隐藏 元 素 时 
或 者 只 是 添加 一 些 视觉 显示 时 使 用 。 


Also in: Effects Core | Method Overrides 


.addClass() 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添 加 指定 的 Class. 


Blind Effect 


百叶 窗 特效 (Blind Effect) 通过 将 元 素 包 于 在 一 个 容器 内 ， 采 用 " 拉 百 叶 窗 "效果 来 隐藏 或 显示 
元 素 。 


Bounce Effect 


反弹 特效 (Bounce Effect) 反弹 一 个 元 素 。 当 与 隐藏 或 显示 一 起 使 用 时 ， 最 后 一 次 或 第 一 次 
反弹 会 呈现 淡 入 /淡出 效果 。 


Clip Effect 


剪辑 特效 (Clip Effect) 通过 垂直 或 水 平方 向 夹 剪 元 素来 隐藏 或 显示 一 个 元 素 。 


Color Animation 


使 用 .animate() 实现 颜色 动画 效果 。 


Drop Effect 


降落 特效 (Drop Effect) 通过 单个 方向 滑动 的 淡 入 淡出 来 隐藏 或 显示 一 个 元 素 。 


Easings 


Easing 函数 指定 动画 在 不 同 点 上 的 行进 速度 。 


Also in: Effects Core | Methods 


.effect() 


对 一 个 元 素 应 用 动画 特效 。 


Explode Effect 


爆炸 特效 (Explode Effect) 通过 把 元 素 裂 成 碎片 来 隐藏 或 显示 一 个 元 素 。 


Fade Effect 


淡 入 淡出 特效 (Fade Effect) 通过 淡 入 淡出 元 素来 隐藏 或 显示 一 个 元 素 。 


Fold Effect 


tr & 4530 (Fold Effect) 通过 折 秋 元 素来 隐藏 或 显示 一 个 元 素 。 


Also in: Effects Core | Method Overrides | Methods 


.hide() 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


Highlight Effect 


突出 特效 (Highlight Effect) 通过 首先 改变 背景 闫 色 来 隐藏 或 显示 一 个 元 素 。 


Puff Effect 


通过 在 缩放 元 素 的 同时 隐藏 元 素来 创建 膨胀 特效 (Puff Effect) 。 


Pulsate Effect 


跳动 特效 (Pulsate Effect) 通过 跳动 来 隐藏 或 显示 一 个 元 素 。 


Also in: Effects Core | Method Overrides 


.removeClass() 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 移 除 指定 的 Class. 


Scale Effect 


按照 某 个 百分比 缩放 元 素 。 


Shake Effect 


垂直 或 水 平方 向 多 次 震动 元 素 。 


Also in: Effects Core | Method Overrides | Methods 


.Show() 


使 用 自 定义 效果 来 显示 匹配 的 元 素 。 


Size Effect 


调整 元 素 尺寸 到 指定 宽度 和 高 度 。 


Slide Effect 


把 元 素 滑 动 出 视 区 。 


Blind EffectAlso in: Effects Core 


.switchClass() 


当 动 画 样式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 添加 和 移 除 指定 的 Class. 


Also in: Effects Core | Method Overrides | Methods 


.toggle() 


使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
Also in: Effects Core | Method Overrides 


.toggleClass() 


当 动 画 样式 改变 时 ， 根 据 Class 是 否 存 在 以 及 switch 参数 的 值 ， 为 匹配 的 元 素 集合 内 的 每 个 
元 素 添 加 或 移 除 一 个 或 多 个 Class。 


Transfer Effect 


把 一 个 元 素 的 轮廓 转移 到 另 一 个 元 素 。 


.addClass() 


Categories: Effects | Effects Core | Method Overrides 


.addClass( className [, duration ] [, easing ] [, 
complete ] )Returns: jQuery 


描述 : 为 每 个 匹配 的 元 素 添加 指定 的 样式 类 名 ， 而 且 所 有 改变 的 样式 以 动画 的 形式 展示 


e .addClass( className [, duration ] [, easing ] [, complete ] ) 


o classNameType: String 为 每 个 匹配 元 素 的 class 属 性 增加 一 个 或 多 个 样式 名 (空格 隔 
开 ) 。 

o duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 
行 多 久 。 GBA GB 3-3E : 默认 值 : "normal", 三 种 预定 速度 的 字符 串 ("slow"， 
"normal", 或 "fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

o easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 组 动 WR, 

o completeType: Function() 在 动画 完成 时 执行 的 事 数 。 


e .addClass( className [, options ] ) 


o classNameType: String 为 每 个 匹配 元 素 的 class 属 性 增加 一 个 或 多 个 样式 名 (空格 隔 
开 ) 。 
o optionsType: Object 一 组 包含 动画 选项 的 值 的 集合 。 支持 的 选项 : 
= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 ( 译 者 注 : 默认 值 : "normal"， 三 种 预定 速度 的 字符 串 ("slow"， 
"normal", 或 "fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 
= easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 组 动 ER 
数 。 
= completeType: Function() 在 动画 完成 时 执行 的 画 数 。 
= children (default: false )Type: Boolean 动 画 是 否 应 用 到 所 有 匹配 的 元 素 的 后 代 
TUR. MISA. 因为 要 确定 哪些 后 代 元 素 要 应 用 动画 可 能 会 非常 好 性 
能 ， 而 且 后 代 元 素 的 数量 是 线性 增长 的 。 
» queue (default: true )Type: Boolean or String 一 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表 示 
的 队列 中 。 


类 似 原生 CSS transitions (33€) , jQuery UI 的 样式 动画 提供 了 一 个 从 一 个 状态 到 另 一 个 状 
态 平滑 过 渡 ， 同时 让 你 保持 那些 CSS 样 式 改 版 的 所 有 细节 ， 和 你 的 javaScript 分 离 。 所 有 桩 
式 动画 的 方法 ， 包 括 .addclass() 支持 自 定义 的 持续 时 间 (durations) 和 缓冲 函数 
(easing) ， 以 及 在 动画 完成 时 提供 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 设置 动画 。 例如 ， 没 有 办 法 让 背景 图 像 应 用 动画 。 不 能 进行 动画 的 样 
式 ， 将 在 动画 结束 时 被 改变 。 


这 个 插件 扩展 了 jQuery 中 的 .addclass() 方法 。 如 果 没 有 加 载 jQuery Ul, 38 
用 .addclass() 方法 可 能 不 会 失败 ， 因 为 方法 仍然 存在 。 然而 ， 预 期 的 行为 GARAGE: 
指 平滑 过 渡 动 画 效 果 ) 将 不 会 发 生 。 


Example: 
匹配 的 元 素 上 添加 "big-blue" 样式。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>addClass demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 


.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 


} 
</style> 
«script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div></div> 


<script> 
$( "div" ).click(function() { 

$( this ).addClass( "big-blue", 1000, "easeOutBounce" ); 
1); 


</script> 


</body> 
</html> 
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Blind Effect 


Categories: Effects 


Description: 百叶 窗 效果 隐藏 或 者 显示 一 个 包装 在 一 个 容器 中 的 元 素 时 候 具 有 "“ 拉 百叶 窗 " 的 效 
AR 


e blind 
o direction (default: "up" )Type: String 


direction 参 数 是 表示 百叶 窗 效果 向 哪个 方向 隐藏 元 素 ， 或 者 从 哪个 方向 开始 显示 元 
素 。 


可 选 值 : up , down, left , right , vertical , horizontal 


容器 元 素 的 应 用 了 overflow: hidden 属性 ， 所 以 高 度 的 变化 将 影响 其 可 见 性 。 


Example: 
使 用 百叶 窗 效果 切换 隐藏 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>blind demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "#toggle" ).toggle( "blind" ); 
1) 


</script> 


</body> 
</html> 











Bounce Effect 


Categories: Effects 


Description: 反弹 特效 上 下 反弹 一 个 元 素 。 当 反弹 特效 和 隐藏 或 显示 配合 使 用 时 ， 最 后 一 个 
或 第 一 个 反弹 也 将 呈现 淡 入 或 淡出 效果 。 


e bounce 


o distance (default: 2e )Type: Number 反 弹 的 最 大 距离 ， 单 位 为 像素 。 
o times (default 5 )Type: Integer 元 素 将 会 反弹 的 次 数 。 当 和 隐藏 或 显示 搭配 使 用 
时 ， 淡 入 淡出 时 会 有 额外 的 “ 半 ” 反 弹 效果 。 


Example: 


使 用 反弹 特效 来 切换 显示 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>bounce demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "toggle" ).toggle( "bounce", { times: 3 }, "slow" ); 
1); 


</script> 


</body> 
</html> 
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Clip Effect 


Categories: Effects 


Description: 甬 辑 效果 通过 垂直 或 水 平和 剪辑 一 个 元 素来 显示 或 隐藏 它 ， 并 且 它 是 从 元 素 的 两 
端 同时 进行 的 。 


e clip 
o direction (default: "up" )Type: String 
剪辑 效果 将 隐藏 或 显示 其 中 元 素 的 平面 。 


vertical 值 将 剪辑 顶部 和 底部 边缘 , while horizontal 值 将 剪辑 左 部 和 右 部 边缘 


Example: 


使 用 剪辑 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>clip demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 

$( document ).click(function() { 
$( "#toggle" ).toggle( "clip" ); 

1); 


</script> 


</body> 
</html> 
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Color Animation 


jQuery UI 特效 内 核 使 用 rgb() ， rgba() ，16 进 制 值 ， 甚 至 颜色 名 称 比 如 "aqua" 给 颜色 增加 
了 动画 新 特性 。 只 需要 包含 jQuery UI 特 效 内 核 文件 和 .animate() 就 可 以 获得 对 各 种 颜色 的 支 
持 。 


支持 以 下 属性 : 


* backgroundColor 

*  borderBottomColor 

*  borderLeftColor 

*  borderRightColor 

*  borderTopColor 

* color 

*  columnRuleColor 

*  outlineColor 

@  textDecorationColor 


*  textEmphasisColor 


对 颜色 动画 的 技术 支持 来 自 jQuery Color plugin, Zi fidet T STHAKLESM me. 
查看 完整 文档 ， 请 访问 jQuery Color documentation, 


Class Animations (与 动 田 关联 的 CSS 类 


当 为 单独 的 颜色 属性 直接 呈现 动画 效果 时 ， 将 样式 包含 在 css 类 中 是 一 个 很 好 的 处 理 方式 。 
jQuery UI 提供 了 一 系列 方法 ， 这 些 方法 可 以 根据 新 增 的 CSS 类 来 呈现 动画 ， 还 可 以 删除 任何 
CSS 类 。 这 些 方 法 包含 .addClass() , .removeClass() , .toggleClass() 和 

.SwitchClass() o 这 些 方法 将 自动 决定 哪些 属性 需要 被 改变 并 且 对 其 应 用 适当 的 动画 。 


Example 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Color Animation Demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#elem { 
color: #006; 
background-color: #aaa; 
font-size: 25px; 
padding: 1em; 
text-align: center; 


</style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div id="elem">color animations</div> 
<button id="toggle">animate colors</button> 


<script> 
$( "#toggle" ).click(function() { 
$( "#elem" ).animate({ 
color: "green", 
backgroundColor: "rgb( 20, 20, 20 )" 
1); 
1); 


</script> 


</body> 
</html> 
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Drop Effect 


Categories: Effects 


Description: 拉 搜 特效 隐藏 或 显示 一 个 元 素 ， 并 使 用 通过 淡 入 或 淡出 效果 使 它 向 一 个 方向 滑 


动 。 
e drop 
o direction (default: "left" )Type: String 
direction 参 数 表 示 将 向 哪个 方向 隐藏 这 个 元 素 ， 或 从 哪个 方向 开始 显示 这 个 元 素 。 
可 选 值 : up, down, left , right 
Example: 


使 用 拉 搜 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>drop demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 

$( document ).click(function() { 
$( "#toggle" ).toggle( "drop" ); 

1); 


</script> 


</body> 
</html> 
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Easings 


画 缓 冲 函 数 可 以 确定 在 动画 过 程 中 不 同时 刻 的 动画 速度 。 jQuery 内 核 自 带 有 2 种 动画 渐变 : 
linear ， 整 个 动画 在 一 个 恒定 的 速度 中 进行 (SR) ， 和 swing (jQuery 内 核 的 默认 渐变 效 
果 )， 此 效果 开始 和 结束 的 速度 要 比 中 间 过 程 的 速度 要 慢 . jQuery UI 还 提供 了 其 它 一 些 额外 的 
EWM, REWMSE swing 效果 中 搜索 变量 来 自 定义 其 它 效 果 ， 比 如 bouncing (x 
弹 ) 。 


一 些 缓冲 函数 在 动画 过 程 中 会 产生 负数 值 。 呈 现 动 画 效果 的 属性 不 同 ， 某 些 属性 的 实际 值 可 
能 会 在 为 0 时 被 锁定 。 例 如 ， 你 可 以 将 left 值 渐变 为 一 个 负数 ， 但 是 你 不 能 将 height 或 

者 opacity 的 值 缓 冲 为 一 个 负数 。 

理解 动画 缓冲 如 何 影响 动画 最 好 的 方式 就 是 查看 对 应 的 函数 图 像 。 下 面 列 出 了 jQuery UI 中 所 
A zh E EAT ER R 


.effect() 


Categories: Effects | Effects Core | Methods 


.effect( effect [, options ] [, duration ] [, complete ] 
JReturns: jQuery 


Description: 在 一 个 元 素 上 应 用 一 个 动画 特效 。 


e .effect( effect [, options ] [, duration ] [, complete ] ) 


o effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

o optionsType: Object 特效 选项 和 缓冲 函数 。 

o duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 
行 多 久 。 (愚人 码头 注 : 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 或 表示 动 
画 时 长 的 毫秒 数值 (如 : 1000) ) 

o completeType: Function() 在 动画 完成 时 执行 的 函数 。 


e .effect( options ) 


o optionsType: Object 全 部 动画 选项 。 只 有 一 个 必须 设置 的 属性 effect 。 

= effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

= easing (default: "swing" )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 
数 。 

= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 GRAB: 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 
或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

= completeType: Function() 在 动画 完成 时 执行 的 函数 。 

= queue (default: true )Type: Boolean or String 一 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表示 
的 队列 中 。 


.effect() 方法 将 对 一 个 元 素 应 用 一 个 特效 。 许多 特效 同时 也 具有 显示 和 隐藏 效果 ， 你 可 以 
搭配 使 用 .show() , .hide() ,和 .toggle() 方法 来 实现 。 


Example: 


一 个 div 应 用 反弹 特效 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>effect demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background: #ccc; 
border: 1px solid #000; 


</style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to apply the effect.</p> 
<div></div> 


<script> 
$( document ).click(function() { 
$( "div" ).effect( "bounce", "slow" ); 


3); 


</script> 


</body> 
</html> 


JR 





Explode Effect 


分 类 : 特效 
描述 : 爆炸 特效 通过 将 元 素 分 拆 成 若干 片 来 隐藏 或 显示 一 个 元 素 。 


« explode 


o pieces (默认 值 : 9 ) 类 型 : 整 型 要 分 裂 的 数量 ， 应 该 是 一 个 完全 平方 数 ,任何 其 它 值 
都 会 被 四 舍 五 人 转换 为 最 接近 的 完全 平方 数 。 


例子 : 
使 用 分 裂 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>explode demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p> 点 击 任何 区 域 来 切换 显示 div。</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).toggle( "explode" ); 
1); 


</script> 


</body> 
</html> 


SS 





Fade Effect 


Categories: Effects 


Description: 淡 和 淡出 的 隐藏 或 显示 一 个 元 素 。 


e fade 


Example: 


使 用 淡 入 淡出 特效 切换 显示 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>fade demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 

$( document ).click(function() { 
$( "£toggle" ).toggle( "fade" ); 

1); 


</script> 


</body> 
</html> 


国王 





Fold Effect 


Categories: Effects 


Description: 通过 折 和 又 形式 来 隐藏 或 显示 一 个 元 素 。 


e fold 


o size (default: 15 )Type: Number or Stringffr & TRAIR T. 

o horizFirst (default: false )Type: Boolean 当 先 从 水 平方 向 开始 隐藏 时 ， 记 住 ， 当 显 
示 时 ， 方 向 是 和 隐藏 时 相反 的 。 CB ANE: 即 如果 隐 藏 时 为 从 右 至 左 ， 那 么 显 
示 时 为 从 左 至 右 。) 


Example: 


使 用 折 司 特效 切换 显示 div。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>fold demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
<div id="toggle"></div> 


<script> 

$( document ).click(function() { 
$( "£toggle" ).toggle( "fold" ); 

1); 


</script> 


</body> 
</html> 


S|: 





.hide() 


Categories: Effects | Effects Core | Method Overrides | Methods 


.hide( effect [, options ] [, duration ] [, complete ] 
JReturns: jQuery 


Description: 使 用 自 定义 的 效果 隐藏 匹配 的 元 素 。 


e .hide( effect [, options ] [, duration ] [, complete ] ) 


o effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

o optionsType: Object 特效 选项 和 缓冲 函数 。 

o duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 
行 多 久 。 (愚人 码头 注 : 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 或 表示 动 
画 时 长 的 毫秒 数值 (如 : 1000) ) 

o completeType: Function() 在 动画 完成 时 执行 的 画 数 。 


e .hide( options ) 


o optionsType: Object 全 部 动画 选项 。 只 有 一 个 必须 设置 的 属性 effect 。 

= effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

= easing (default: "swing" )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 
数 。 

= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 GRAB: 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 
或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

= completeType: Function() 在 动画 完成 时 执行 的 函数 。 

= queue (default: true )Type: Boolean or String— 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表示 
的 队列 中 。 


这 个 插件 扩展 了 jQuery 中 的 .hide() 方法 。 如 果 没 有 加 载 jQuery UI， 调 用 .hide() 方法 可 能 
不 会 失败 ， 因 为 方法 仍然 存在 。 然而 ， 预 期 的 行为 〈 因 人 码头 注 : 指 平滑 过 渡 动 画 效果 ) 将 
不 会 发 生 。 


Example: 


使 用 拖 动 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>hide demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background: #ccc; 
border: 1px solid #000; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code.jquery.com/yui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<button>hide the div</button> 
<div></div> 


<script> 
$( "button" ).click(function() { 
$( "div" ).hide( "drop", { direction: "down" }, "slow" ); 


3): 


«/script» 


«/body» 
«/html» 





Highlight Effect 


Categories: Effects 


Description: 高 亮 特效 通过 先 动 画 呈 现 元 素 的 背景 颜色 来 隐藏 或 显示 一 个 元 素 。 


。highlight 


o color (default: "#ffff99" )Type: String 动 画 执行 时 的 背景 颜色 。 


Example: 


使 用 高 之 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>highlight demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "#toggle" ).toggle( "highlight" ); 
3); 


</script> 


</body> 
</html> 


BE 





Puff Effect 


Categories: Effects 


Description: 创建 拉 伸 的 效果 ， 缩 放 元 素 的 同时 隐藏 或 显示 元 素 。 


e puff 


o percent (default: 150 )Type: Number 元 素 放 大 的 百分比 。 


Example: 


使 用 拉 伸 特 效 来 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>puff demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 

$( document ).click(function() { 
$( "#toggle" ).toggle( "puff" ); 

3); 


</script> 


</body> 
</html> 


BE 





Pulsate Effect 


Categories: Effects 


Description: 闪烁 效果 通过 脉冲 闪烁 隐藏 或 显示 元 素 。 


e pulsate 


o times (default: 5 )Type: Integer 元 素 闪烁 的 次 数 ， 在 隐藏 或 显示 时 会 额外 增加 一 个 
半 闪 烁 效果 。 


Example: 


使 用 闪烁 特效 来 切换 显示 div。 


<!doctype html» 
«html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>pulsate demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "toggle" ).toggle( "pulsate" ); 
1); 


</script> 


</body> 
</html> 


SS 





.removeClass() 


Categories: Effects | Effects Core | Method Overrides 


.removeClass( className [, duration ] [, easing ] [, 
complete ] )Returns: jQuery 


Description: 为 每 个 匹配 的 元 素 移 除 指定 的 样式 类 名 ， 而 且 所 有 改变 的 样式 以 动画 的 形式 展 


Z 


e .removeClass( className [, duration ] [, easing ] [, complete ] ) 


o 


classNameType: String 为 每 个 匹配 元 素 的 class 属 性 移 除 一 个 或 多 个 样式 名 (空格 隔 
开 ) 。 

duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 

行 多 久 。 (愚人 码头 注 : 默认 值 : "normal"， 三 种 预定 速度 的 字符 串 ("slow'"， 
"normal", 或 "fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 WRK 
completeType: Function() 在 动画 完成 时 执行 的 函数 。 


e .removeClass( className [, options ] ) 


o 


o 


classNameType: String 为 每 个 匹配 元 素 的 class 属 性 移 除 一 个 或 多 个 样式 名 (空格 隔 
F) a 
optionsType: Object 一 组 包含 动画 选项 的 值 的 集合 。 支持 的 选项 : 
= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 ( 译 者 注 : 默认 值 : "normal"， 三 种 预定 速度 的 字符 串 ("slow'"， 
"normal", 或 "fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 
= easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 


数 。 
= completeType: Function() 在 动画 完成 时 执行 的 孙 alas 
= children (default: false )Type: Boolean 动 画 是 否 应 用 到 所 有 匹配 的 元 素 的 后 代 


元 素 。 应 慎 使 用 此 功能 。 eee c 
8B, MA 后 代 元 素 的 数量 是 线性 增长 的 。 

= queue (default: true )Type: Boolean or String 一 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表 示 
的 队列 中 。 


类 似 原生 CSS transitions (33€) , jQuery UI 的 样式 动画 提供 了 一 个 从 一 个 状态 到 另 一 个 状 
态 平滑 过 渡 ， 同时 让 你 保持 那些 CSS 样 式 改 版 的 所 有 细节 ， 和 你 的 javaScript 分 离 。 所 有 桩 
式 动 画 的 方法 ， 包 插 .removeclass() 支持 自 定义 的 持续 时 间 (durations) 和 缓冲 函数 
(easing) ， 以 及 在 动画 完成 时 提供 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 设置 动画 。 例如 ， 没 有 办 法 让 背景 图 像 应 用 动画 。 不 能 进行 动画 的 样 
式 ， 将 在 动画 结束 时 被 改变 。 


这 个 插件 扩展 了 jQuery 中 的 .removeciass() 方法 。 如 果 没 有 加 载 jQuery UI， 调 
用 . removeClass() 方法 可 能 不 会 失败 ， 因为 方法 仍然 存在 。 然而 ， 预期 的 行为 (BABS 
注 : 指 平滑 过 渡 动 画 效果 ) 将 不 会 发 生 。 


Example: 


匹配 的 元 素 上 移 除 "big-blue" 样 式 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>removeClass demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 


.big-blue { 
width: 200px; 
height: 200px; 
background-color: #00f; 


} 
</style> 
«script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div class="big-blue"></div> 


<script> 
$( "div" ).click(function() { 

$( this ).removeClass( "big-blue", 1000, "easeInBack" ); 
1); 


</script> 


</body> 
</html> 


ee 





Scale Effect 


Categories: Effects 


Description: 按 百分比 缩小 或 放大 一 个 元 素 。 


e。 Scale 


o direction (default: "both" )Type: String 效 果 的 方向 。 可 选 值 : "both", 
"vertical" OF "horizontal" 

o origin (default: [ "middle", "center" ] )Type: Array 消 失 点 。 

o percentType: Number 缩 放 百 分 比 。 

o scale (default: "both" )Type: String 确 定 元 素 的 哪个 区 域 特 被 缩放 : " both" 
"box" , "content" o Box 值 缩放 元 素 的 border 和 padding; content 值 缩放 元 素 内 部 的 
所 有 内 容 。 


Examples: 


Example: 使 用 缩放 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>scale demo</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "#toggle" ).toggle( "scale" ); 
1); 


</script> 


</body> 
</html> 


«| NE 








Example: 使 用 缩放 特效 ， 但 只 朝 一 个 方向 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>scale demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "£toggle" ).toggle({ effect: "scale", direction: "horizontal" }); 
1); 


</script> 


</body> 
</html> 


EE) 





Shake Effect 


Categories: Effects 


Description: 在 垂直 或 水 平方 向 上 多 次 抖动 一 个 元 素 。 


e shake 


o direction (default: "left" )Type: String 一 个 "eft" 或 "right" 值 将 使 元 素 在 水 平方 向 拌 
动 ， "up" 或 "down" 值 将 使 元 素 在 垂直 方向 抖动 。 该 值 指定 元 素 这 个 效果 应 治 轴 线 移 
动 的 第 一 步 的 方向 。 

o distance (default: 2e )Type: Number 拌 动 距离 。 

o times (default: 3 )Type: IntegerBl ab 3 


Example: 
抖动 一 个 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>shake demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to shake the box.</p> 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 

$( "#toggle" ).effect( "shake" ); 
1) 


</script> 


</body> 
</html> 


al — 





.Show() 


Categories: Effects | Effects Core | Method Overrides | Methods 


.show( effect [, options ] [, duration ] [, complete ] 
JReturns: jQuery 


Description: 使 用 自 定 义 特 效 显示 匹配 的 元 素 。 


e .Show( effect [, options ] [, duration ] [, complete ] ) 


o effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

o optionsType: Object 特效 选项 和 缓冲 函数 。 

o duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 
行 多 久 。 (愚人 码头 注 : 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 或 表示 动 
画 时 长 的 毫秒 数值 (如 : 1000) ) 

o completeType: Function() 在 动画 完成 时 执行 的 函数 。 


e .Show( options ) 


o optionsType: Object 全 部 动画 选项 。 只 有 一 个 必须 设置 的 属性 effect 。 

= effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

= easing (default: "swing" )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 
数 。 

= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 GRAB: 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 
或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

= completeType: Function() 在 动画 完成 时 执行 的 函数 。 

= queue (default: true )Type: Boolean or String— 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表示 
的 队列 中 。 


这 个 插件 扩展 了 jQuery 中 的 .show() 方法 。 如 果 没 有 加 载 jQuery Ul, 33 FH. .show() 方法 可 能 
不 会 失败 ， 因 为 方法 仍然 存在 。 然而 ， 预 期 的 行为 (BAAR: 指 平滑 过 渡 动 画 效果 ) 将 
不 会 发 生 。 


Example: 


使 用 折 和 县 特效 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>show demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
display: none; 
width: 100px; 
height: 100px; 
background: #ccc; 
border: 1px solid #000; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code.jquery.com/yui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<button>show the div</button> 
<div></div> 


<script> 

$( "button" ).click(function() { 
$( "div" ).show( "fold", 1000 ); 

1); 


«/script» 


«/body» 
</html> 





Size Effect 


Categories: Effects 


Description: 将 元 素 的 尺寸 设置 到 一 个 指定 的 宽度 和 高 度 。 


e size 


o toType: Object 改变 后 高 和 宽 。 

o origin (default: [ "top", "left" ] )Type: Array 特 效 起 始 的 方向 。 

o scale (default: "both" )Type: String 确 定 元 素 的 哪个 区 域 将 被 缩放 : "both" 
"box" , "content" 。Box 值 缩放 元 素 的 border 和 padding; contenti 4g HESEPIEREN 
所 有 内 容 。 


Example: 


使 用 尺寸 特效 来 改变 div 的 尺寸 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>size demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code.jquery.com/yui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to resize the box.«/p» 
<div id="toggle"></div> 


<script> 
$( document ).click(function() { 
$( "#toggle" ).effect( "size", { 
to: { width: 200, height: 60 } 
}, 1000 ); 
1); 


</script> 


</body> 
</html> 








Slide Effect 


Categories: Effects 


Description: 将 元 素 滑 动 到 可 视 区 域 之 外 。 


e slide 


o direction (default: "both" )Type: String 特 效 的 执行 方向 。 可 选 值 : "left", 
"right" , "up" , "down" o 

o distance (default: element's outerwidth (元 素 的 外 边缘 宽 ) )Type: Number 特 效 执 
行 的 距离 。 默认 值 为 元 素 的 高 或 宽 , 取 决 于 direction 参数 的 值 来 决定 (BRAAK 
注 : 水 平方 向 为 宽 ， 垂 直方 向 为 高 ) 。 可 以 被 设置 为 任何 小 于 元 素 宽 / 高 的 整数 。 


Example: 


使 用 滑动 特效 切换 显示 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>slide demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#toggle { 
width: 100px; 
height: 100px; 
background: #ccc; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<p>Click anywhere to toggle the box.«/p» 
«div id="toggle"></div> 


«script» 
$( document ).click(function() { 

$( "#toggle" ).toggle( "slide" ); 
1) 


</script> 


</body> 
</html> 


al — 





.switchClass() 


Categories: Effects | Effects Core 


.switchClass( removeClassName, addClassName [, 
duration ] [, easing ] [, complete ] )Returns: jQuery 


Description: 为 每 一 组 匹配 的 元 素 添加 或 移 除 指定 的 样式 类 ， 而 且 所 有 改变 的 样式 以 动画 的 


形式 展示 


e .switchClass( removeClassName, addClassName [, duration ] [, easing ] 
[, complete ] ) 


o 


o 


removeClassNameType: String 将 要 被 从 匹配 的 元 素 移 除 的 class 属 性 的 一 个 或 多 个 
名 称 (以 空格 分 开 ) 。 

addClassNameType: String 将 要 被 添加 到 匹配 的 元 素 的 class 属 性 的 一 个 或 多 个 名 称 
(以 空格 分 开 ) 。 

duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 
行 多 久 。 ( 译 者 注 : 默认 值 : "normal", 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 
"fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 组 动 WR, 
completeType: Function() 在 动画 完成 时 执行 的 函数 。 


e .switchClass( removeClassName, addClassName [, options ] ) 


o 


removeClassNameType: String 将 要 被 从 匹配 的 元 素 移 除 的 class 属 性 的 一 个 或 多 个 


名 称 ( 以 空格 分 开 ) 。 
addClassNameType: String 将 要 被 添加 到 匹配 的 元 素 的 class 属 性 的 一 个 或 多 个 名 称 
(以 空格 分 开 ) 。 


optionsType: Object 一 组 包含 动画 选项 的 值 的 集合 。 所 有 属性 是 可 选择 的 。 

= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 GES: 默认 值 : "normal"， 三 种 预定 速度 的 字符 串 ("slow"， 
"normal", 或 "fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

= easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 
数 。 

= completeType: Function() 在 动画 完成 时 执行 的 画 数 。 

= children (default: false )Type: Boolean 动 画 是 否 应 用 到 所 有 匹配 的 元 素 的 后 代 
元 素 。 应 愤 使 用 此 功能 。 因为 要 确定 哪些 后 代 元 素 要 应 用 动画 可 能 会 非常 好 性 
能 ， 而 且 后 代 元 素 的 数量 是 线性 增长 的 。 


= queue (default: true )Type: Boolean or String 一 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表示 
的 队列 中 。 


.switchclass() 方法 人 允许 你 在 展现 动画 的 同时 添加 或 移 除 样式 类 。 


类 似 原生 CSS transitions (过 渡 ) , jQuery UI 的 样式 动画 提供 了 一 个 从 一 个 状态 到 另 一 个 状 
态 平滑 过 渡 ， 同时 让 你 保持 那些 CSS 样 式 改版 的 所 有 细节 ， 和 你 的 javaScript 分 离 。 所 有 禅 
式 动画 的 方法 ， 包 括 .switchclass() 支持 自 定义 的 持续 时 间 (durations) 和 缓冲 函数 
(easing) ， 以 及 在 动画 完成 时 提供 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 设置 动画 。 例如 ， 没 有 办 法 让 背景 图 像 应 用 动画 。 不 能 进行 动画 的 样 
式 ， 将 在 动画 结束 时 被 改变 。 


这 个 插件 扩展 了 jQuery 中 的 .switchclass() 方法 。 如 果 没 有 加 载 jQuery UI， 调 

用 .switchclass() 方法 可 能 不 会 失败 ， 因 为 方法 仍然 存在 。 然而 ， 预 期 的 行为 GRABS 
注 : 指 平滑 过 渡 动 画 效果 ) 将 不 会 发 生 。 

Example: 


向 匹配 的 元 素 添 加 祥 式 类 "blue"， 并 且 移 除 样式 类 "big"。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>switchClass demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 
} 
.big { 
width: 200px; 
height: 200px; 
} 


.blue { 
background-color: #00f; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div class="big"></div> 


<script> 
$( "div" ).click(function() { 

$( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" ); 
1); 


</script> 


</body> 
</html> 


[e aS ee: 





.toggle() 


Categories: Effects | Effects Core | Method Overrides | Methods 


.toggle( effect [, options ] [, duration ] [, complete ] 
JReturns: jQuery 


Description: 使 用 自 定义 特效 显示 或 隐藏 匹配 的 元 素 。 


e .toggle( effect [, options ] [, duration ] [, complete ] ) 


o effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

o optionsType: Object 特效 选项 和 缓冲 函数 。 

o duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 将 运 
行 多 久 。 (愚人 码头 注 : 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 或 表示 动 
画 时 长 的 毫秒 数值 (如 : 1000) ) 

o completeType: Function() 在 动画 完成 时 执行 的 函数 。 


e .toggle( options ) 


o optionsType: Object 全 部 动画 选项 。 只 有 一 个 必须 设置 的 属性 effect 。 

= effectType: String 一 个 字符 串 ， 指 示 哪 个 特效 被 使 用 。 

= easing (default: "swing" )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 
数 。 

= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 GRAB: 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 
或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 

= completeType: Function() 在 动画 完成 时 执行 的 函数 。 

= queue (default: true )Type: Boolean or String— 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表 示 
的 队列 中 。 


这 个 插件 扩展 了 jQuery 中 的 .toggle() 方法 。 如 果 没 有 加 载 jQuery Ul， 调用 .toggle() 方法 
可 能 不 会 失败 ， 因 为 方法 仍然 存在 。 然而 ， 预 期 的 行为 〈 大 人 码头 注 : 指 平滑 过 渡 动 画 效 
果 ) 将 不 会 发 生 。 


Example: 


使 用 折 司 特效 来 切换 显示 一 个 div。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>toggle demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background: #ccc; 
border: 1px solid #000; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<button>toggle the div</button> 
<div></div> 


<script> 
$( "button" ).click(function() { 

$( "div" ).toggle( "fold", 1000 ); 
1); 


«/script» 


«/body» 
«/html» 





.toggleClass() 


Categories: Effects | Effects Core | Method Overrides 


.toggleClass( className [, switch ] [, duration ] [, 
easing ] [, complete ] )Returns: jQuery 


Description: 为 每 一 组 匹配 的 元 素 添 加 或 移 除 一 个 或 多 个 样式 类 ， 取 决 于 当前 元 素 是 否 存在 
该 样式 类 和 switch 参 数 。， 而 且 所 有 改变 的 样式 以 动画 的 形式 展示 


e .toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] ) 


o 


classNameType: String 将 要 被 添加 到 匹配 的 元 素 的 class 属 性 的 一 个 或 多 个 名 称 (以 
空格 分 开 ) 。 

switchType: Boolean 一 个 决定 是 否 添加 或 移 除 某 css 类 的 布尔 

duration (default: 400 )Type: Number or ean 将 运 
行 多 久 。 (愚人 码头 注 : 三 种 预定 速度 的 字符 串 ("slow", "normal", 或 "fast") 或 表示 动 
画 时 长 的 毫秒 数值 (如 : 1000) ) 

easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 西数 。 
completeType: Function() 在 动画 完成 时 执行 的 函数 。 


e .toggleClass( className [, switch ] [, options ] ) 


o 


classNameType: String 将 要 被 添加 到 匹配 的 元 素 的 class 属 性 的 一 个 或 多 个 名 称 (以 
空格 分 开 ) 。 
switchType: Boolean 一 个 决定 是 否 添加 或 移 除 某 css 类 的 布尔 
optionsType: Object 一 组 包含 动画 选项 的 值 的 集合 。 a M 
= duration (default: 400 )Type: Number or String 一 个 字符 串 或 者 数字 决定 动画 
将 运行 多 久 。 GES: 默认 值 : "normal"， 三 种 预定 速度 的 字符 串 ("slow"， 
"normal", 或 "fast") 或 表示 动画 时 长 的 毫秒 数值 (如 : 1000) ) 
= easing (default: swing )Type: String 一 个 字符 串 ， 表 示 过 渡 使 用 哪 种 缓 动 ER 


数 。 
= completeType: Function() 在 动画 完成 时 执行 的 孙 aig 
= children (default: false )Type: Boolean 动 画 是 否 应 用 到 所 有 匹配 的 元 素 的 后 代 


元 素 。 应 愤 使 用 此 功能 。 ee m 
能 ， 而 且 后 代 元 素 的 数量 是 线性 增长 的 。 

= queue (default: true )Type: Boolean or String 一 个 布尔 值 ， 指 示 是 否 将 动画 放 
置 在 效果 队列 中 。 如 果 为 false 时 ， 将 立即 开始 动画 。 从 jQuery1.7 开 始 ， 队 列 
选项 也 可 以 接受 一 个 字符 串 ， 在 这 种 情况 下 ， 在 动画 被 添加 到 由 该 字符 串 表 示 


的 队列 中 。 


类 似 原生 CSS transitions (33€) , jQuery UI 的 样式 动画 提供 了 一 个 从 一 个 状态 到 另 一 个 状 
AGERE, 同时 让 你 保持 那些 CSS 样 式 改版 的 所 有 细节 ， 和 你 的 javaScript 分 离 。 所 有 样 
式 动画 的 方法 ， 包 括 .toggleclass() 支持 自 定义 的 持续 时 间 (durations) 和 缓冲 函数 
(easing) ， 以 及 在 动画 完成 时 提供 一 个 回调 。 


并 非 所 有 的 样式 都 可 以 设置 动画 。 例如 ， 没 有 办 法 让 背景 图 像 应 用 动画 。 不 能 进行 动画 的 样 
式 ， 将 在 动画 结束 时 被 改变 。 


这 个 插件 扩展 了 jQuery 中 的 .toggleclass() 方法 。 如 果 没 有 加 载 jQuery UI， 调 
用 .toggleclass() 方法 可 能 不 会 失败 ， 因 为 方法 仍然 存在 。 然而 ， 预 期 的 行为 (恩人 码头 
注 : 指 平滑 过 渡 动 画 效果 ) 将 不 会 发 生 。 


Example: 


把 类 "big-blue" 添 加 到 匹配 的 元 素 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>toggleClass demo</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #ccc; 


T 

.big-blue { 
width: 200px; 
height: 200px; 
background-color: £00f; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div></div> 


<script> 
$( "div" ).click(function() { 

$( this ).toggleClass( "big-blue", 1000, "easeOutSine" ); 
1); 


</script> 


</body> 
</html> 





Transfer Effect 


Categories: Effects 


Description: Transfers the outline of an element to another element 


e transfer 


o classNameType: String 传 递 给 目标 元 素 的 样式 类 名 。 
o toType: StringjQuery 选 择 器 , 要 转移 到 的 目标 元 素 。 


当 试 图 在 两 个 元 素 之 间 呈 现 互动 效果 时 ， 该 特效 非常 有 用 。 
被 转移 元 素 自己 有 一 个 样式 类 ui-effects-transfer ， 但 此 类 需要 开发 者 自己 配置 ， 例 如 添加 


BR BK Wie. 


Example: 


点 击 绿色 元 素 将 其 轮廓 转 移 到 另 一 个 元 素 上 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>transfer demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
div.green { 
width: 100px; 
height: 80px; 
background: green; 
border: 1px solid black; 
position: relative; 
} 
div.red { 
margin-top: 10px; 
width: 50px; 
height: 30px; 
background: red; 
border: 1px solid black; 
position: relative; 
} 
.Ui-effects-transfer { 
border: 1px dotted black; 


} 
</style> 
«script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div class="green"></div> 
<div class="red"></div> 


<script> 
$( "div" ).click(function() { 

var i = 1 - $( "div" ).index( this ); 

$( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 ); 
1); 


</script> 


</body> 
</html> 


SSS) 





Effect Core 


由 jquery.ui.effect.js 提供 的 功能 。 除 了 下 面 列 出 的 方法 ，jquery.ui.effect.js 还 包括 一 些 
Easings。 


Also in: Effects | Method Overrides 


.addClass() 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添 加 指定 的 Class. 


Color Animation 

使 用 .animate() 实现 颜色 动画 效果 。 
Also in: Effects | Methods 
.effect() 


对 一 个 元 素 应 用 动画 特效 。 


Also in: Effects | Method Overrides | Methods 


.hide() 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


Also in: Effects | Method Overrides 


.removeClass() 

当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 移 除 指定 的 Class. 
Also in: Effects | Method Overrides | Methods 

.Show() 


使 用 自 定义 效果 来 显示 匹配 的 元 素 。 


Also in: Effects 


.switchClass() 


当 动 画 样式 改变 时 ， 为 匹配 的 元 素 集合 内 的 每 个 元 素 添加 和 移 除 指定 的 Class. 


Also in: Effects | Method Overrides | Methods 


.toggle() 

使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
Also in: Effects | Method Overrides 
.toggleClass() 


当 动 画 样式 改变 时 ， 根 据 Class 是 否 存 在 以 及 switch 参数 的 值 ， 为 匹配 的 元 素 集合 内 的 每 个 
元 素 添 加 或 移 除 一 个 或 多 个 Class. 


Interactions 


jQuery UI 提供 了 一 套 基 于 饥 标 的 交互 。 


Draggable Widget 


允许 使 用 鼠标 移动 元 素 。 


Droppable Widget 


为 可 拖 搜 小 部 件 创建 目标 。 


Also in: Utilities 


Mouse Interaction 


Resizable Widget 


使 用 鼠标 改变 元 素 的 尺寸 
Selectable Widget 


使 用 鼠标 选择 单个 元 素 或 一 组 元 素 。 


Sortable Widget 


使 用 鼠标 调整 列表 中 或 者 网 格 中 元 素 的 排序 。 


Draggable Widget 


Categories: Interactions 


version added: 1.0 


Description: 该 组 件 可 以 让 你 使 用 鼠标 拖 动 所 有 元 素 。 


QuickNavExamples 


Options 


addClasses 

e appendTo 

e axis 

e cancel 

e connectToSortable 
e containment 

e cursor 

e cursorAt 

e delay 

e disabled 

e distance 

e grid 

e handle 

e helper 

e iframeFix 

e opacity 

e refreshPositions 
e revert 

e revertDuration 
e scope 

e scroll 

e scrollSensitivity 
e scrollSpeed 

e snap 

e snapMode 


e SnapTolerance 
e stack 
e zindex 


Methods 


e destroy 
e disable 
e enable 
e option 

e widget 


Events 


e create 
e drag 
e start 
e stop 


让 被 选择 元 素 可 以 被 鼠标 拖 动 。 如 果 你 想 把 元 素 拖 放 到 另 一 个 元 素 内 部 ， 查 看 jQuery UI 
Droppable plugin, 该 组 件 为 被 拖 动 元 素 提供 了 一 个 目标 容器 。 


Dependencies (依赖 性 ) 


e Ul Core 
e Widget Factory 
e Mouse Interaction 


Options 


addClassesType: Boolean 


Default: true 如 果 值 设置 为 false , ui-draggable 样式 类 将 不 能 被 添加 引用 。 当 在 大 量 元 素 
上 调用 .draggable() 时 ， 你 可 能 会 想 要 这 样 设置 ， 作 为 一 个 性 能 优化 。Code examples: 


使 用 addclasses 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ addClasses: false }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 addclasses 选项 


// getter 
var addClasses = $( ".selector" ).draggable( "option", "addClasses" ); 


// setter 
$( ".selector" ).draggable( "option", "addClasses", false ); 


appendToType: jQuery or Element or Selector or String 


Default: "parent" 当 进 行 拖 动 时 ， 拖 动 组 件 助手 应 该 被 添加 到 的 元 素 。 支 持 多 种 类 型 : 


e jQuery: 一 个 含有 要 被 添加 拖 动 组 件 助手 的 元 素 的 Jquery 对 象 。 
。 Element: 要 被 添加 拖 动 组 件 助手 的 元 素 。 


。 Selector: 一 个 用 来 识别 要 被 添加 拖 动 组 件 助手 的 元 素 的 选择 器 。 
e String: 字符 串 "parent" 将 会 使 拖 动 组 件 助手 成 为 组 件 的 同 级 元 素 。 


Code examples: 


使 用 appendTo 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ appendTo: "body" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 appendto 选项 


// getter 
var appendTo = $( ".selector" ).draggable( "option", "appendTo" ); 


// setter 
$( ".selector" ).draggable( "option", "appendTo", "body" ); 


axisType: String 


Default: false 约束 拖 动 的 动作 只 能 在 水 平 (x 轴 ) 或 垂直 (y 轴 ) 上 执行 。 可 选 值 : Ux", 
"y" , Code examples: 


使 用 axis 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ axis: "x" 3); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 axis 选项 : 


// getter 
var axis = $( ".selector" ).draggable( "option", "axis" ); 


// setter 
$( ".selector" ).draggable( "option", "axis", "x" ); 


cancelType: Selector 


Default: "input, textarea, button, select, option" 防止 在 指定 元 素 上 开始 拖 动 。Code 
examples: 


使 用 cancel 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ cancel: ".title" 3); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 cancel 选项 : 
// getter 
var cancel = $( ".selector" ).draggable( "option", "cancel" ); 


// setter 
$( ".selector" ).draggable( "option", "cancel", ".title" ); 


connectToSortableType: Selector 


Default: false 允许 draggable 被 拖 搜 到 指定 的 sortables 中 。 如 果 使 用 了 该 选项 ， 被 拖 动 的 元 
素 可 以 被 放置 于 一 个 应 用 了 排序 组 件 的 元 素 列 表 中 并 成 为 该 列表 的 一 部 分 。 注 意 : 为 了 完美 的 
使 用 该 特性 ， helper 选项 必须 被 设置 为 "clone" 。 必须 包含 jQuery Ul 排序 组 件 。Code 
examples: 


使 用 connectTosortable 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 connectTosortable 选项 : 


// getter 
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" ); 


// setter 
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" ); 


containmentType: Selector or Element or String or Array 


Default: false 可 以 限制 draggable 只 能 在 指定 的 元 素 或 区 域 的 边界 以 内 进行 拖 动 。 支 持 多 种 
e Selector: 可 拖 动 元 素 将 被 置 于 由 选择 器 指定 的 第 一 个 元 素 的 起 界限 作用 的 盒 模型 中 。 如 
果 没 有 找到 任何 元 素 ， 则 不 会 设置 界限 。 
。 Element: 可 拖 动 的 元 素 将 包含 该 元 素 的 边界 框 。 
e String: 可 选 值 : "parent" , "document" , "window" . 
e Array: 以 [ x1, y1, x2, y2 ] 数组 形式 定义 一 个 限制 区 域 . 


Code examples: 


使 用 containment 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ containment: "parent" 3); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 containment 选项 : 
// getter 
var containment = $( ".selector" ).draggable( "option", "containment" ); 


// setter 
$( ".selector" ).draggable( "option", "containment", "parent" ); 


cursorType: String 


Default: "auto" 指定 在 做 拖 搜 动作 时 ， 鼠 标的 CSS 样 式 。Code examples: 


使 用 cursor 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ cursor: "crosshair" }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 cursor 选项 : 


// getter 
var cursor = $( ".selector" ).draggable( "option", "cursor" ); 


// setter 
$( ".selector" ).draggable( "option", "cursor", "crosshair" ); 


cursorAtType: Object 


Default: false 设置 拖 动 帮手 相对 于 鼠标 光标 的 偏 移 量 。 坐 标 可 被 指定 为 一 个 散 列 使 用 的 组 
合 中 的 一 个 或 两 个 键 : { top, left, right, bottom } o Code examples: 


使 用 cursorAt 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ cursorAt: { left: 5 } 3); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 cursorat 选项 : 


// getter 
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); 


// setter 
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); 


delayType: Number 


Default: o 当 鼠 标 按 下 后 ， 指 定时 延迟 间 后 才 开 始 激活 拖 搜 动作 (单位 : 毫秒 ) 。 此 选项 可 
用 来 阻止 当 点 击 一 个 元 素 时 可 能 发 生 的 非 期 望 拖 动 行为 。Code examples: 


使 用 delay 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ delay: 300 }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 delay 选项 : 


// getter 
var delay = $( ".selector" ).draggable( "option", "delay" ); 


// setter 
$( ".selector" ).draggable( "option", "delay", 300 ); 


disabledType: Boolean 


Default: false 如 果 该 值 设置 为 true ， 拖 动 特效 将 被 禁用 。Code examples: 


使 用 disabled 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ disabled: true }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).draggable( "option", "disabled" ); 


// setter 
$( ".selector" ).draggable( "option", "disabled", true ); 


distanceType: Number 


Default: 1 当 鼠 标点 下 后 ， 只 有 移动 指定 像素 后 才 开 始 激活 拖 搜 动 作 ， 单 位 为 像素 。 此 选项 
可 用 来 阻止 当 点 击 一 个 元 素 时 可 能 发 生 的 非 期 望 拖 动 行为 。Code examples: 


使 用 distance 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ distance: 10 }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 distance 选项 : 
// getter 
var distance = $( ".selector" ).draggable( "option", "distance" ); 


// setter 
$( ".selector" ).draggable( "option", "distance", 10 ); 


gridType: Array 


Default: false 拖 搜 元 素 时 ， 只 能 以 指定 大 小 的 方 格 进行 拖 动 。 数 组 形式 
为 [ x, y ]。Code examples: 


使 用 grid 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ grid: [ 50, 20 ] 3); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 grid 选项 : 


// getter 
var grid = $( ".selector" ).draggable( "option", "grid" ); 


// setter 
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); 


handleType: Selector or Element 


Default: false 当 参 数值 为 true 时 ,只 有 在 特定 的 元 素 上 触发 鼠标 按 下 事件 时 ， 才 可 以 拖 动 。 
只 有 被 拖 到 元 素 的 子 元 素 才 可 以 应 用 该 参数 。Code examples: 


使 用 handle 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ handle: "h2" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 handle 选项 : 


// getter 
var handle = $( ".selector" ).draggable( "option", "handle" ); 


// setter 
$( ".selector" ).draggable( "option", "handle", "h2" ); 


helperType: String or Function() 


Default: "original" 人 允许 一 个 元 素 被 用 来 进行 拖 动 。 支 持 多 种 类 型 : 


e String: 如 果 值 设置 为 "clone" ,那么 该 元 素 将 会 被 复制 ， 并 且 被 复制 的 元 素 将 被 拖 动 。 
e Function: 当 拖 动 时 ， 画 数 将 返回 一 个 DOM 元 素 以 供 使 用 。 


Code examples: 


使 用 helper 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ helper: "clone" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 helper 选项 : 


// getter 
var helper = $( ".selector" ).draggable( "option", "helper" ); 


// setter 
$( ".selector" ).draggable( "option", "helper", "clone" ); 


iframeFixType: Boolean or Selector 


Default: false 在 拖 动 期 间 阻 止 frame 捕 捉 鼠 标 移 过 事件 。 与 cursorAt 选项 搭配 使 用 时 或 者 
当 鼠 标 指针 可 能 不 在 拖 动 助手 元 素 之 上 时 ， 该 参数 非常 有 用 。 支 持 多 种 类 型 ; 


e Boolean: 当 设 置 为 true， 透明 层 将 被 放置 于 页 面 上 的 所 有 iframe 之 上 。/li> 
e Selector: 任何 由 选择 器 匹配 的 iframe 将 被 透明 层 履 盖 。 


Code examples: 


使 用 iframerix 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ iframeFix: true }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 iframeFix 选项 : 
// getter 
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ); 


// setter 
$( ".selector" ).draggable( "option", "iframeFix", true ); 


opacityType: Number 
Default: false 当 拖 动 时 ， 拖 动 助手 元 素 的 不 透明 度 。Code examples: 


使 用 opacity 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ opacity: 0.35 }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 opacity 选项 : 


// getter 
var opacity = $( ".selector" ).draggable( "option", "opacity" ); 


// setter 
$( ".selector" ).draggable( "option", "opacity", 0.35 ); 


refreshPositionsType: Boolean 


Default: false 如 果 设 置 为 tru, 所 有 的 可 拖 动 位 置 在 每 次 鼠标 移动 时 都 会 被 计算 。 注意 : 
这 解决 了 具有 高 度 动态 内 容 页 面 的 问题 ， 但 是 却 降低 了 性 能 。Code examples: 


使 用 refreshPositions 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ refreshPositions: true }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 refreshPositions 选项 : 


// getter 
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" ); 


// setter 
$( ".selector" ).draggable( "option", "refreshPositions", true ); 


revertType: Boolean or String 
Default: raise 当 拖 动 停止 时 ， 元 素 是 否 要 被 重 置 到 它 的 初始 位 置 。 支 持 多 种 类 型 : 


e Boolean: 如 果 设 置 为 true ， 当 拖 动 停止 时 ， 元 素 位 置 将 被 重 置 。 
e String: 如 果 设 置 为 "invalid" , 重 置 仅 当 拖 动 没有 被 放置 于 一 个 可 放置 的 对 象 时 才 会 发 
生 。 如 果 设 置 为 "valid" , 情况 则 相反 。 


Code examples: 


使 用 revert 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ revert: true }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 revert 选项 : 


// getter 
var revert = $( ".selector" ).draggable( "option", "revert" ); 


// setter 
$( ".selector" ).draggable( "option", "revert", true ); 


revertDurationType: Number 


Default: 500 动画 重 置 时 间 , 单位 为 微 秒 。 如 果 revert 选项 设置 为 false ， 则 忽略 ( 译 者 
x: 即 被 拖 到 元 素 不 会 被 重 置 。) 。Code examples: 


使 用 revertpuration 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ revertDuration: 200 }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 revertDuration 选项 : 


// getter 
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" ); 


// setter 
$( ".selector" ).draggable( "option", "revertDuration", 200 ); 


scopeType: String 


Default: "default" 被 用 来 将 拖 动 组 件 和 拖 动 至 容器 组 件 的 参数 进行 分 组 , 除了 拖 动 至 容器 组 
件 的 accept 选项 。 如 果 一 个 一 般 拖 动 组 件 的 scope 参数 值 和 一 个 拖 动 至 容器 组 件 的 scope 参 
数值 一 样 ， 那 么 这 个 一 般 拖 动 组 件 将 被 接受 为 拖 动 至 容器 组 件 。Code examples: 


使 用 scope 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ scope: "tasks" 3); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 scope 选项 : 
// getter 
var scope = $( ".selector" ).draggable( "option", "scope" ); 


// setter 
$( ".selector" ).draggable( "option", "scope", "tasks" ); 


scrollType: Boolean 


Default: true 如 果 设 置 为 true , 当 拖 动 时 ，div 盒 模型 将 自动 翻滚 。Code examples: 


使 用 scroll 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ scroll: false }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 scroll 选项 : 


// getter 
var scroll = $( ".selector" ).draggable( "option", "scroll" ); 


// setter 
$( ".selector" ).draggable( "option", "scroll", false ); 


scrollSensitivityType: Number 


Default: 2o 离开 可 视 区 域 边缘 多 少 距离 开始 滚动 。 距 离 是 相对 指针 进行 计算 的 ， 而 不 是 被 拖 
到 元 素 本 身 。 如 果 scroll 选项 设置 为 false ， 则 不 滚动 。Code examples: 


使 用 scrollsensitivity 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ scrollSensitivity: 100 }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 scrollsensitivity 选项 : 


// getter 
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" ); 


// setter 
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 ); 


scrollSpeedType: Number 


Default: 20 当 鼠 标 指 针 的 值 小 于 scrollsensitivity 的 值 时 ， 窗 口 滚动 的 速度 。 如 
果 scroll 选项 设置 为 false ， 则 该 参数 无 效 。Code examples: 


使 用 scrollspeed 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ scrollSpeed: 100 }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 scrollspeed 选项 : 


// getter 
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" ); 


// setter 
$( ".selector" ).draggable( "option", "scrollSpeed", 100 ); 


snapType: Boolean or Selector 
Default: false 决定 一 个 元 素 是 否 应 该 吸附 到 其 它 元 素 上 。 支 持 多 种 类 型 : 


e Boolean: 当 设 置 为 true 时 , 元 素 将 可 以 吸附 到 所 有 其 它 可 拖 动 元 素 上 。 
e Selector: 确定 被 吸附 元 素 。 


Code examples: 


使 用 snap 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ snap: true }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 snap 选项 : 


// getter 
var snap = $( ".selector" ).draggable( "option", "snap" ); 


// setter 
$( ".selector" ).draggable( "option", "snap", true ); 


snapModeType: String 


Default: "both" 决定 可 拖 动 元 素 将 要 吸附 到 哪个 元 素 的 边缘 。 如 果 snap 选项 设置 
为 false ， 则 忽略 该 参数 。 可 选 值 : "inner" , "outer" , "both" .Code examples: 


使 用 snapMode 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ snapMode: "inner" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 snapMode 选项 : 


// getter 
var snapMode = $( ".selector" ).draggable( "option", "snapMode" ); 


// setter 
$( ".selector" ).draggable( "option", "snapMode", "inner" ); 


snapToleranceType: Number 


Default: 2o 当 距 离 可 吸附 元 素 多 远 时 ， 触 发 吸附 事件 。 如 果 snap 选项 设置 为 false ， 则 忽 
略 该 参数 。Code examples: 


使 用 snapTolerance 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ snapTolerance: 30 }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 snapTolerance 选项 : 


// getter 
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" ); 


// setter 
$( ".selector" ).draggable( "option", "snapTolerance", 30 ); 


stackType: Selector 


Default: false 控制 由 选择 器 所 触发 的 一 系列 元 素 的 z-index 值 , 总 是 将 当前 被 拖 动 对 象 至 于 最 
前 。 对 于 像 窗 口 管理 这 样 的 应 用 来 说 ， 非 常 有 用 。Code examples: 


使 用 stack 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ stack: ".products" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 stack 选项 : 
// getter 
var stack = $( ".selector" ).draggable( "option", "stack" ); 


// setter 
$( ".selector" ).draggable( "option", "stack", ".products" ); 


zindexType: Number 


Default: false 当 被 拖 动 时 ， 拖 动 助手 的 Z-index 值 。Code examples: 


使 用 z1ndex 选项 初始 化 Draggable Widget : 


$( ".selector" ).draggable({ zIndex: 100 }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 zIndex 选项 : 
// getter 
var zIndex = $( ".selector" ).draggable( "option", "zIndex" ); 


// setter 
$( ".selector" ).draggable( "option", "zIndex", 100 ); 


Methods 


destroy() 

完全 销毁 一 般 拖 动 组 件 的 功能 ， 这 将 使 元 素 返回 它 的 初始 状态 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


请 求 destroy 方 法 : 


$( ".selector" ).draggable( "destroy" ); 


disable() 


禁用 一 般 拖 动 组 件 。 
。 这 个 方法 不 接受 任何 参数 。 


Code examples: 
请 求 disable 方 法 : 


$( ".selector" ).draggable( "disable" ); 


enable() 
启用 一 般 拖 动 组 件 。 

。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


请 求 enable 方 法 : 


$( ".selector" ).draggable( "enable" ); 


option( optionName )Returns: Object 
获取 与 optionName 对 应 的 参数 值 。 

。 optionNameType: String 要 获取 的 值 所 对 应 的 选项 的 名 称 。 
Code examples: 
请 求 方法 : 


var isDisabled = $( ".selector" ).draggable( "option", "disabled" 


option()Returns: PlainObject 

获取 一 个 包含 有 描述 当前 一 般 拖 动 组 件 选项 哈 希 值 的 键 / 值 对 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 

请 求 方法 : 


var options = $( ".selector" ).draggable( "option" ); 


option( optionName, value ) 


设置 一 般 拖 动 组 件 选项 的 值 ， 选 项 名 称 由 optionName 指定 。 


。 optionNameType: String 要 设置 的 选项 的 名 称 。 
。 valueType: Object 要 为 选项 设置 的 参数 值 。 


Code examples: 


请 求 方法 : 


$( ".selector" ).draggable( "option", "disabled", true ); 


option( options ) 
为 一 般 拖 动 组 件 设置 一 个 或 多 个 选项 值 。 
。 optionsType: Object 要 设置 的 选项 与 值 之 间 的 映射 关系 。 
Code examples: 
请 求 方法 : 


$( ".selector" ).draggable( "option", { disabled: true } ); 


widget()Returns: jQuery 

返回 一 个 包含 有 可 拖 动 元 素 的 jquery 对 象 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


请 求 widget 方 法 : 


var widget = $( ".selector" ).draggable( "widget" ); 


Events 


create( event, ui )Type: dragcreate 


当 一 般 拖 动 组 件 被 创建 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 但 是 为 了 与 其 它 元 素 保 持 一 直 ， 它 总 是 被 包含 。 


Code examples: 


t FHcreate[B] 33 ES 218 XE HH: 


$( ".selector" ).draggable({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 dragcreate 事 件 : 


$( ".selector" ).on( "dragcreate", function( event, ui ) {} ); 


drag( event, ui )Type: drag 
当 和 鼠标 在 拖 动 过 程 中 移动 时 触发 。 


e eventType: Event 

e uiType: Object 
o helperType: jQuery 代表 被 拖 动 的 元 素 。 
o positionType: Object 当前 元 素 的 CSS 位 置 ， 以 { top, left } 形式 给 出 。 
o offsetType: Object 当 前 元 素 的 偏 移 位 置 ， 以 { top, left 3 形式 给 出 。 


Code examples: 


使 用 drag 回 调 画 数 指定 事件 : 


$( ".selector" ).draggable({ 
drag: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 者 到 drag 事 件 : 


$( ".selector" ).on( "drag", function( event, ui ) {} ); 


start( event, ui )Type: dragstart 


当 拖 动 开始 时 触发 。 


e eventType: Event 

e uiType: Object 
o helperType: jQuery 代表 被 拖 动 的 元 素 。 
o positionType: Object 当前 元 素 的 CSS 位 置 ， 以 ( top, left } 形式 给 出 。 
o offsetType: Object 当前 元 素 的 偏 移 位 置 ， 以 ( top, left } 形式 给 出 。 


Code examples: 


4 FA start callback specified: 


$( ".selector" ).draggable({ 
start: function( event, ui ) {} 


}); 


拖 动 事件 绑 定 一 个 事件 监听 器 : 


$( ".selector" ).on( "dragstart", function( event, ui ) {} ); 


stop( event, ui )Type: dragstop 
当 拖 动 停止 时 触发 。 


e eventType: Event 

e uiType: Object 
o helperType: jQuery 代表 被 拖 动 的 元 素 。 
o positionType: Object 当前 元 素 的 CSS 位 置 ， 以 { top, left } 形式 给 出 。 
o offsetType: Object 当 前 元 素 的 偏 移 位 置 ， 以 { top, left 3 形式 给 出 。 


Code examples: 


使 用 start 回 调 画 数 指定 事件 : 


$( ".selector" ).draggable({ 
stop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 者 到 dragstart 事 件 : 


$( ".selector" ).on( "dragstop", function( event, ui ) {} ); 


Example: 


一 个 简单 的 jQuery UI 一 般 拖 动 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>draggable demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#draggable { 
width: 100px; 
height: 100px; 
background: #ccc; 


</style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div id="draggable">Drag me</div> 
<script> 
$( "#draggable" ).draggable(); 


</script> 


</body> 
</html> 
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Droppable Widget 


Categories: Interactions 


version added: 1.0 
Description: 创建 拖 动 元 素 的 目标 。 
QuickNavExamples 


Options 


e accept 
activeClass 


e addClasses 
disabled 
e greedy 


hoverClass 


e scope 
tolerance 


Methods 


e destroy 
e disable 
e enable 
e option 

e widget 


Events 


e activate 
e create 

e deactivate 
e drop 

e out 


e over 


jQuery UI 拖 放 插件 可 以 使 所 选 元 素 可 拖 放 (这 意味 着 draggables 拖 动 可 以 被 拖 放 接受 ) 。 您 
可 以 指定 哪个 拖 动 被 接受 。 
Dependencies (依赖 性 ) 


e Ul Core 
e Widget Factory 
e Mouse Interaction 


Options 


acceptType: Selector or Function() 


Default: "*" 控制 可 拖 动 的 元 素 被 拖 放 接受 。 支 持 多 种 类 型 : 


e Selector: 一 个 选择 器 可 拖 动 的 元 素 。 
e Function: 函数 将 被 调用 页 面 上 的 每 一 个 可 拖 动 的 (传递 给 男 数 的 第 一 个 参数 ) 。 该 画 数 
必须 返回 true ， 如 果 可 拖 动 应 该 接受 。 


Code examples: 


使 用 指定 的 accept 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ accept: ".special" }); 


在 初始 化 后 设置 或 者 获取 accept 参数 : 


// getter 
var accept = $( ".selector" ).droppable( "option", "accept" ); 
// setter 
$( ".selector" ).droppable( "option", "accept", ".special" ); 


activeClassType: String 


Default: false 如 果 指 定 了 该 参数 ,在 被 允许 的 draggable 对 象 填 充 时 ,droppable 会 被 添加 上 指 
定 的 样式 。Code examples: 


使 用 指定 的 activeclass 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ activeClass: "ui-state-highlight" }); 


在 初始 化 后 设置 或 者 获取 activeclass 参数 : 


// getter 
var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); 


// setter 
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" ); 


addClassesType: Boolean 


Default: true 如 果 设 置 为 false , 可 以 防止 ui-droppabie 类 在 进行 时 添加 . 这 可 能 会 使 在 初 
始 化 数 百 个 元 素 执 行 .droppable() 时 使 性 能 得 到 理想 的 优化 .Code examples: 


使 用 指定 的 addclasses 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ addClasses: false }); 


在 初始 化 后 设置 或 者 获取 addclasses 参数 : 


// getter 
var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); 


// setter 

$( ".selector" ).droppable( "option", "addClasses", false ); 
disabledType: Boolean 
Default: false 如 果 设 置 为 true 将 禁止 拖 放 。Code examples: 


使 用 指定 的 disabled 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ disabled: true }); 


在 初始 化 后 设置 或 者 获取 disabled 参数 : 


// getter 
var disabled = $( ".selector" ).droppable( "option", "disabled" ); 


// setter 
$( ".selector" ).droppable( "option", "disabled", true ); 


greedyType: Boolean 


Default: false 默认 情况 下 ， 当 一 个 元 素 被 放 到 散 套 的 放置 (droppable) 对 象 时 ， 每 个 放置 
(droppable) 对 象 都 将 接收 到 这 个 元 素 。 然 而 ， 当 设置 这 个 选项 为 true 时 ， 任 何 父 级 的 放 
i& (droppable) 对 象 不 会 接收 元 素 。 drop 事件 将 依然 会 正常 的 泡沫 ， 但 event.target 查看 
哪个 放置 (droppable) 对 象 接 受 了 拖 动 元 素 。Code examples: 


使 用 指定 的 greedy 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ greedy: true }); 


在 初始 化 后 设置 或 者 获取 greedy 参数 : 


// getter 
var greedy = $( ".selector" ).droppable( "option", "greedy" ); 


// setter 
$( ".selector" ).droppable( "option", "greedy", true ); 
hoverClassType: String 


Default: false 如 果 设 置 了 该 参数 ,将 在 一 个 被 允许 的 拖 动 元 素 莽 停 在 放置 (droppable) 对 象 
Ea, AE (droppable) 对 象 添加 一 个 指定 的 样式 .Code examples: 


使 用 指定 的 hoverclass 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ hoverClass: "drop-hover" }); 


在 初始 化 后 设置 或 者 获取 hoverclass 参数 : 


// getter 
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); 


// setter 
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" ); 


scopeType: String 


Default: "default" 用 来 设置 拖 动 (draggle) 元 素 和 放置 (droppable) 对 象 的 集合 , 除了 
droppable 中 的 accept 属性 指定 的 元 素 外 ,和 放置 (droppable) 对 象 相同 集合 的 放置 
(droppable) 对 象 也 被 允许 添加 到 放置 (droppable) 对 象 中 .Code examples: 


使 用 指定 的 scope 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ scope: "tasks" 3); 


在 初始 化 后 设置 或 者 获取 scope 参数 : 
// getter 
var scope = $( ".selector" ).droppable( "option", "scope" ); 


// setter 
$( ".selector" ).droppable( "option", "scope", "tasks" ); 


toleranceType: String 


Default: "intersect" 指定 使 用 那 种 模式 来 测试 一 个 拖 动 (draggable) 元 素 "经 过 "一 个 放置 
(droppable) 对 象 。 允许 使 用 的 值 : 


e "fit" : 拖 动 (draggable) 元 素 5E & AR ME (droppable) 对 象 。 

e "intersect" : 拖 动 (draggable) 元 素 和 放置 (droppable) sx12& Z2 ^ 8 50%, 
e "pointer" : Rr EB dE lS (droppable) 对 象 上 。 

e "touch" : 拖 动 (draggable) 元 素 和 放置 (droppable) 对 象 的 任意 重 受 


Code examples: 


使 用 指定 的 tolerance 参数 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ tolerance: "fit" 3); 


在 初始 化 后 设置 或 者 获取 tolerance 参数 : 
// getter 
var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); 


// setter 
$( ".selector" ).droppable( "option", "tolerance", "fit" ); 


Methods (方法 ) 


destroy() 

完全 移 除 拖 放 功 能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 这 个 方法 不 接受 任何 参数 

Code examples: 


调用 destroy 方法 


$( ".selector" ).droppable( "destroy" ); 


disable() 


禁用 拖 放 。 
。 这 个 方法 不 接受 任何 参数 


Code examples: 


调用 disable 方法 


$( ".selector" ).droppable( "disable" ); 


enable() 


启用 拖 放 。 
。 这 个 方法 不 接受 任何 参数 
Code examples: 


调用 enable 方法 


$( ".selector" ).droppable( "enable" ); 


option( optionName )Returns: Object 
通过 指定 的 optionName 获取 当前 关联 的 值 。 
e optionNameType: String 要 获取 值 的 选项 名 
Code examples: 
调用 这 个 方法 : 


var isDisabled = $( ".selector" ).droppable( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 对 象 ， 它 包含 表示 当前 droppable 的 选项 hash 的 键 / 值 对 。 
。 这 个 方法 不 接受 任何 参数 

Code examples: 

调用 这 个 方法 : 


var options = $( ".selector" ).droppable( "option" ); 


option( optionName, value ) 
通过 指定 的 optionname ， 设 置 droppable 的 相关 选项 值 。 


e optionNameType: String 要 设置 值 的 选项 名 。 


e valueType: Object 要 设置 选项 的 值 。 
Code examples: 
调用 这 个 方法 : 


$( ".selector" ).droppable( "option", "disabled", true ); 


option( options ) 
为 droppable 设 置 一 个 或 多 个 选项 。 
e optionsType: Object 设置 的 选项 / 值 对 的 对 象 。 
Code examples: 
调用 这 个 方法 : 


$( ".selector" ).droppable( "option", { disabled: true } ); 


widget()Returns: jQuery 

返回 一 个 jquery ， 它 包含 了 droppable 元 素 。 
。 这 个 方法 不 接受 任何 参数 

Code examples: 

调用 widget 方法 


var widget = $( ".selector" ).droppable( "widget" ); 


Events 


activate( event, ui )Type: dropactivate 


这 个 事件 会 在 任何 允许 的 draggable 对 象 开始 拖 动 时 触发 。 它 可 以 用 来 在 你 想 让 droppable 对 象 
在 可 以 被 填充 的 时 " 亮 起 来 "的 时 候 。 


e eventType: Event 
e uiType: Object 
o draggableType: jQuery 一 个 jQuery 对 象 代表 的 拖 动 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 拖 动 元 素 的 助手 。 
o positionType: Object 当前 可 拖 动 助手 的 CSS 的 position (位 置 ) 对 象 ， 


如 ( top, left } 。 
o offsetType: Object 当前 可 拖 动 助手 的 偏 移 位 置 对 象 ， 如 { top, left } 。 


Code examples: 


使 用 指定 的 activate 回调 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ 
activate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 dropactivate 事 件 : 


$( ".selector" ).on( "dropactivate", function( event, ui ) {} ); 


create( event, ui )Type: dropcreate 


此 事件 会 在 droppable 创 建 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 create 回调 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ 
create: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 到 dropcreate 事 件 : 


$( ".selector" ).on( "dropcreate", function( event, ui ) {} ); 


deactivate( event, ui )Type: dropdeactivate 


此 事件 会 在 任何 允许 的 draggable 对 象 停止 拖 动 时 触发 . 


e eventType: Event 
e uiType: Object 
o draggableType: jQuery 一 个 jQuery 对 象 代 表 的 拖 动 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 拖 动 元 素 的 助手 。 
o positionType: Object 当前 可 拖 动 助手 的 CSS 的 position (位 置 ) +, 


如 ( top, left } 。 
o offsetType: Object 当前 可 拖 动 助手 的 偏 移 位 置 对 象 ， 如 { top, left } 。 


Code examples: 


使 用 指定 的 deactivate 回调 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ 
deactivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 dropdeactivate 事 件 : 


$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} ); 


drop( event, ui )Type: drop 


这 个 事件 会 在 一 个 允许 的 拖 动 (draggable) 元 素 填 充 进 这 个 放置 (droppable) 对 象 时 触发 . 
(基于 tolerance 选项 ) 。 ( 轧 人 码头 注释 : 回调 函数 中 , $(this) 表示 被 填充 的 droppable 对 
象 . ui.draggable 表示 draggable 对 象 .) 
e eventType: Event 
e uiType: Object 
o draggableType: jQuery 一 个 jQuery 对 象 代 表 的 拖 动 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 拖 动 元 素 的 助手 。 
o positionType: Object 当前 可 拖 动 助手 的 CSS 的 position (位 置 ) +, 
如 { top, left } 。 
o offsetType: Object 当前 可 拖 动 助手 的 偏 移 位 置 对 象 ， 如 { top, left } 。 


Code examples: 


使 用 指定 的 drop 回调 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ 
drop: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 到 drop 事 件 : 


$( ".selector" ).on( "drop", function( event, ui ) {} ); 


out( event, ui )Type: dropout 


此 事件 会 在 一 个 允许 的 拖 动 (draggable) 元 素 离 开 这 个 放置 (droppable) 对 象 时 触发 〈 基 
于 tolerance 选项 ) o 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 out 回调 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ 
out: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 dropout 事 件 : 


$( ".selector" ).on( "dropout", function( event, ui ) {} ); 


over( event, ui )Type: dropover 


此 事件 会 在 一 个 允许 的 拖 动 (draggable) 元 素 经 过 这 个 放置 (droppable) 对 象 时 触发 (HE 
于 tolerance 选项 ) o 


e eventType: Event 
e uiType: Object 
o draggableType: jQuery 一 个 jQuery 对 象 代 表 的 拖 动 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 拖 动 元 素 的 助手 。 
o positionType: Object 当前 可 拖 动 助手 的 CSS 的 position (位 置 ) 对 象 ， 
如 ( top, left } 。 
o offsetType: Object 当 前 可 拖 动 助手 的 偏 移 位 置 对 象 ， 如 { top, left }。 


Code examples: 


使 用 指定 的 over 回调 初始 化 一 个 droppable : 


$( ".selector" ).droppable({ 
over: function( event, ui ) {} 


H; 


绑 定 一 个 事件 监听 到 dropover 事 件 : 


$( ".selector" ).on( "dropover", function( event, ui ) {} ); 


Example: 


A pair of draggable and droppable elements. 


<!doctype html» 

<html lang="en"> 

<head> 

<meta charset="utf-8"> 

<title>droppable demo</title> 

<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery-u 
<style> 

#draggable { 

width: 100px; 

height: 100px; 

background: #ccc; 

j 

#droppable { 

position: absolute; 

left: 250px; 

top: 0; 

width: 125px; 

height: 125px; 

background: #999; 

color: #fff; 

padding: 10px; 

j 

«/style» 

«script srcz'http://code.jquery.com/jquery-1.9.1.js"»«/script» 
«script srcz'http://code.jquery.com/ui/1.10.3/jquery-ui.js"»«/script» 
«/head» 
«body» 


«div id="droppable">Drop here</div> 
<div id="draggable">Drag me</div> 


<script> 
$( "#draggable" ).draggable(); 
$( "#droppable" ).droppable({ 
drop: function() { 

alert( "dropped" ); 

} 

}); 


</script> 


</body> 
</html> 


i 





Mouse Interaction 


Categories: Interactions | Utilities 


Description: 底层 的 交互 组 件 


QuickNav 


Options 


e cancel 
e delay 
e distance 


Methods 


e mouseCapture 
e _mouseDelayMet 
e _mouseDestroy 
e _mouseDistanceMet 
e _mouseDown 

e mouseDrag 

e mouselnit 

e _mouseMove 

e  mouseStart 

e —mouseStop 

e mouseUp 


Events 


像 jouery.widget , Mouse Interaction (鼠标 交互 ) 的 目的 不 是 直接 使 用 。 这 纯粹 是 一 个 让 其 
他 部 件 (widget) 继承 基础 组 件 。 这 个 页 面 只 文档 被 添加 到 jouery.widget ， 但 它 包 括 不 打算 
被 重 写 的 内 部 方法 。 对 外 公开 的 API 是 .mouseStart() , _mouseDrag() , _mouseStop() ,和 


_mouseCapture() . 


Dependencies 


e Widget Factory 


Options 


cancelType: Selector 


Default: "input, textarea, button, select, option" 防止 在 指定 的 元 素 上 相互 作用 。Code 
examples: 


使 用 指定 的 cancel 参数 初始 化 一 个 : 


$( ".selector" ).mouse({ cancel: ".title" }); 


在 初始 化 后 设置 或 者 获取 cancel 参数 : 


// getter 
var cancel = $( ".selector" ).mouse( "option", "cancel" ); 


// setter 
$( ".selector" ).mouse( "option", "cancel", ".title" ); 


delayType: Number 


Default: o & jg (以 毫秒 为 单位 ) , Emh FAEERE (interactions) 激活 。 此 选项 
可 用 来 阻止 当 点 击 一 个 元 素 时 可 能 发 生 的 非 期 望 互动 (interactions) 行为 。Code examples: 


使 用 指定 的 delay 参数 初始 化 一 个 : 


$( ".selector" ).mouse({ delay: 300 }); 


在 初始 化 后 设置 或 者 获取 delay 参数 : 


// getter 
var delay = $( ".selector" ).mouse( "option", "delay" ); 


// setter 
$( ".selector" ).mouse( "option", "delay", 300 ); 


distanceType: Number 


Default: 1 当 鼠 标点 下 后 ， 只 有 移动 指定 像素 后 才 开 始 激活 互动 (interactions) 动作 ， 单 位 
为 像素 。 此 选项 可 用 来 阻止 当 点 击 一 个 元 素 时 可 能 发 生 的 非 期 望 拖 动 行为 。Code examples: 


使 用 指定 的 distance 参数 初始 化 一 个 : 


$( ".selector" ).mouse({ distance: 10 }); 


在 初始 化 后 设置 或 者 获取 distance 参数 : 


// getter 
var distance = $( ".selector" ).mouse( "option", "distance" ); 


// setter 
$( ".selector" ).mouse( "option", "distance", 10 ); 


Methods 


_mouseCapture()Returns: Boolean 

确定 一 个 互动 (interaction) 是 否 基于 事件 目标 元 素 。 默 认 总 是 返回 true o 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


调用 _mouseCapture 方法 : 


$( ".selector" ).mouse( " mouseCapture" ); 


. mouseDelayMet()Returns: Boolean 
确定 delay 选项 是 否 满足 当前 的 互动 (interaction) 。 

。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseDelayMet 方法 : 


$( ".selector" ).mouse( " mouseDelayMet" ); 


_mouseDestroy() 


破坏 互动 (interaction) 的 事件 义理 程序 。 这 个 必须 调用 从 widget 的 _destroy() Aik. 
Destroys the interaction event handlers. This must be called from the extending widget's 
_destroy() method. 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseDestroy 方法 : 


$( ".selector" ).mouse( " mouseDestroy" ); 


_mouseDistanceMet()Returns: Boolean 
确认 distance 选项 是 否 已 满足 当前 的 互动 (interaction) 

。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseDistanceMet 方法 : 


$( ".selector" ).mouse( " mouseDistanceMet" ); 


_mouseDown() 


Hx (interaction) 开始 处 理 。 验 证 该 事件 原先 相关 的 鼠标 按钮 键 并 确 
{F delay 和 distance 选项 符合 之 前 激活 的 互动 (interaction) 。 当 互动 (interaction) Æ% F 
始 时 ， 调 用  mousestart() 方法 来 处 理 扩 展 部 件 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseDown 方法 : 


$( ".selector" ).mouse( " mouseDown" ); 


_mouseDrag() 


扩展 部 件 需要 执行 一 个 _mousedrag() 方法 来 处理 互动 (interaction) 的 每 次 移动 。 此 方法 将 
接收 鼠标 移动 相关 事件 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseDrag 方法 : 


$( ".selector" ).mouse( " mouseDrag" ); 


. mouselnit() 


初始 化 的 互动 (interaction) 事件 处 理 程序 。 这 必须 调用 扩展 部 件 的 create) 方法 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 
调用 _mouselnit 方法 : 


$( ".selector" ).mouse( " mouseInit" ); 


_mouseMove() 

处 理 互动 (interaction) 的 每 次 移动 。 为 扩展 部 件 处 理 器 调用 mousedrag() 方法 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


调用 _mouseMove 方法 : 


$( ".selector" ).mouse( " mouseMove" ); 


_mouseStart() 


扩展 部 件 需要 执行 一 个 _mousestart() 方法 来 处 理 互动 (interaction) 的 开始 激活 。 此 方法 将 
接收 互动 (interaction) 开始 激活 的 相关 鼠标 事件 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseStart 方法 : 


$( ".selector" ).mouse( " mouseStart" ); 


_mouseStop() 


扩展 部 件 需要 执行 一 个 _mousestop() 方法 来 处 理 互动 (interaction) 的 结束 。 此 方法 将 接收 
互动 (interaction) 结束 的 相关 鼠标 事件 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseStop 方法 : 


$( ".selector" ).mouse( " mouseStop" ) 


_mouseUp() 


互动 (interaction) 结束 的 义理 程序 。 调 用 mousestop() 方法 来 处 理 扩 展 部 件 。 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 _mouseUp 方法 : 


$( ".selector" ).mouse( " mouseUp" ); 


Resizable Widget 


Categories: Interactions 


version added: 1.0 


Description: 使 用 鼠标 改变 一 个 元 素 的 尺寸 。 


QuickNavExamples 


Options 


e alsoResize 

e animate 

e animateDuration 
e animateEasing 
e aspectRatio 

e autoHide 

e cancel 

e containment 
e delay 

e disabled 

e distance 

e ghost 

e grid 

e handles 

e helper 

e maxHeight 

e maxWidth 

e minHeight 

e minWidth 


Methods 


e destroy 


disable 
e enable 
e option 


e widget 


Events 


e create 
e resize 
e start 
e stop 


jQuery UI Resizable 插件 使 选 定 的 内 容 可 以 调整 大 小 (这 以 为 着 那么 拥有 一 些 可 以 拖 动 的 手 
柄 ). 你 可 以 指定 一 个 或 者 多 个 操作 手柄 以 及 指定 最 小 和 最 大 宽度 与 高 度 . 
Dependencies 


e Ul Core 
e Widget Factory 
e Mouse Interaction 


其 他 注意 事项 : 
e 这 个 widget 需要 一 些 功能 性 的 CSS， 否 则 将 无 法 正常 工作 。 如 果 你 建立 一 个 自 定义 的 主 


题 ， 使 用 widget 指定 的 CSS 文 件 作 为 一 个 激活 点 。 


Options 


alsoResizeType: Selector or jQuery or Element 


Default: false 在 重读 元素 尺寸 大 小 的 同时 重 置 指定 的 一 个 或 多 个 元 素 的 尺寸 大 小 。Code 
examples: 


使 用 指定 的 alsoResize 参数 初始 化 resizable : 


$( ".selector" ).resizable({ alsoResize: "#mirror" 3); 


在 初始 化 后 设置 或 者 获取 alsoResize 参数 : 
// getter 
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" ); 


// setter 
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); 


animateType: Boolean 
Default: false 在 调整 大 小 后 使 用 一 段 动画 完成 调整 .Code examples: 


使 用 指定 的 animate 参数 初始 化 resizable : 


$( ".selector" ).resizable({ animate: true }); 


在 初始 化 后 设置 或 者 获取 animate SR: 


// getter 
var animate = $( ".selector" ).resizable( "option", "animate" ); 


// setter 
$( ".selector" ).resizable( "option", "animate", true ); 


animateDurationType: Number or String 
Default: "slow" 当 使 用 animate 选项 时 ， 动 画 持 续 的 时 间 。 单 位 毫秒 。 人 允许 使 用 的 值 : 


e Number: 毫秒 数 。 
e String: 一 个 表示 持续 时 间 的 字符 串 ， 比 如 "slow" or "fast" o 


Code examples: 


使 用 指定 的 animateDuration 参数 初始 化 resizable : 


$( ".selector" ).resizable({ animateDuration: "fast" }); 


在 初始 化 后 设置 或 者 获取 animateDuration 参数 : 


// getter 
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" ); 


// setter 
$( ".selector" ).resizable( "option", "animateDuration", "fast" ); 


animateEasingType: String 


Default: "swing" 动画 执行 时 的 缓冲 效果 。 当 使 用 animate 选项 时 ， 哪 个 easing GEBEN 
数 ) 被 应 用 。Code examples: 


使 用 指定 的 animateEasing 参数 初始 化 resizable : 


$( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); 


在 初始 化 后 设置 或 者 获取 animateEasing 参数 : 


// getter 
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" ); 


// setter 
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" ); 


aspectRatioType: Boolean or Number 


Default: false 该 元 素 是 否 应 限制 在 一 个 特定 的 比例 进行 缩放 。 人 允许 使 用 的 值 : 


e Boolean: 如 果 设 置 为 true , 大 小 将 按照 原先 的 宽 高 比 进行 调整 。 
e Number: 强制 元 素 调 整 大 小 时 保持 一 个 特定 的 宽 高 比 。 


Code examples: 


使 用 指定 的 aspectRatio 参数 初始 化 resizable : 


$( ".selector" ).resizable({ aspectRatio: true }); 


在 初始 化 后 设置 或 者 获取 aspectRatio SR: 


// getter 
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" ); 


// setter 
$( ".selector" ).resizable( "option", "aspectRatio", true ); 


autoHideType: Boolean 


Default: false 如 果 设 置 为 真 , 将 会 自动 隐藏 调整 手柄 图 标 ,除非 鼠标 移动 到 该 元 素 上 .Code 
examples: 


使 用 指定 的 autouide 参数 初始 化 resizable : 


$( ".selector" ).resizable({ autoHide: true }); 


在 初始 化 后 设置 或 者 获取 autoHide SM: 


// getter 
var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); 


// setter 
$( ".selector" ).resizable( "option", "autoHide", true ); 


cancelType: Selector 


Default: "input, textarea, button, select, option" 如 果 设 置 了 选择 器 匹配 ,将 拒绝 对 匹配 元 素 的 


大 小 调整 .Code examples: 


使 用 指定 的 cancel 参数 初始 化 resizable : 


$( ".selector" ).resizable({ cancel: ".cancel" }); 


在 初始 化 后 设置 或 者 获取 cancel SR: 
// getter 
var cancel = $( ".selector" ).resizable( "option", "cancel" ); 


// setter 
$( ".selector" ).resizable( "option", "cancel", ".cancel" ); 


containmentType: Selector or Element or String 


Default: false 使 用 指定 的 元 素 强制 性 限制 大 小 调整 的 界限 .允许 使 用 的 值 : 


e Selector:resizable 元 素 将 被 限制 在 该 选择 器 匹配 的 第 一 个 元 素 的 边界 内 。 


的 元 素 ， 那 么 设置 将 不 起 作用 。 
。 Element: resizable 元 素 将 被 限制 在 这 个 元 素 的 边界 内 。 
e String: 可 能 的 值 : "parent" 和 "document" . 


Code examples: 


使 用 指定 的 containment 参数 初始 化 resizable : 


$( ".selector" ).resizable({ containment: "parent" 3); 


在 初始 化 后 设置 或 者 获取 containment 参数 : 


// getter 


var containment = $( ".selector" ).resizable( "option", "containment" ); 


// setter 
$( ".selector" ).resizable( "option", "containment", "parent" ); 


delayType: Number 


Default: o 设 定 需 要 经 过 多 少 毫 秒 以 后 调整 才 会 开始 . 如 果 指 定 了 该 参数 , 调整 


如 果 没 有 匹配 


会 马上 开始 ， 


除非 鼠标 调整 动作 已 经 持续 了 指定 的 时 间 . 这 可 以 防止 误 操 作对 元 素 进 行 了 非 预 期 的 调 


整 .Code examples: 


使 用 指定 的 delay 参数 初始 化 resizable : 


$( ".selector" ).resizable({ delay: 150 }); 


在 初始 化 后 设置 或 者 获取 delay SR: 


// getter 
var delay = $( ".selector" ).resizable( "option", "delay" ); 


// setter 
$( ".selector" ).resizable( "option", "delay", 150 ); 


disabledType: Boolean 
Default: false 如 果 设 置 为 true 将 禁止 resizable (缩放 ) o Code examples: 


使 用 指定 的 disabled 参数 初始 化 resizable : 


$( ".selector" ).resizable({ disabled: true }); 


在 初始 化 后 设置 或 者 获取 disabled SR: 


// getter 
var disabled = $( ".selector" ).resizable( "option", "disabled" ); 


// setter 
$( ".selector" ).resizable( "option", "disabled", true ); 
distanceType: Number 


Default: 1 设 定 调整 操作 需要 移动 多 少 个 像素 后 调整 才 会 开始 . 如 果 指 定 了 该 参数 , 调整 不 会 
马上 开始 ,直到 鼠标 移动 了 指定 的 像素 后 .这 可 以 防止 误 操 作对 元 素 进行 了 非 预 期 的 调整 .Code 
examples: 


使 用 指定 的 distance 参数 初始 化 resizable : 


$( ".selector" ).resizable({ distance: 30 }); 


在 初始 化 后 设置 或 者 获取 distance 参数 : 


// getter 
var distance = $( ".selector" ).resizable( "option", "distance" ); 


// setter 
$( ".selector" ).resizable( "option", "distance", 30 ); 


ghostType: Boolean 


Default: false 如 果 设 置 为 true , 将 会 在 调整 过 程 中 看 到 一 个 半 透 明 的 辅助 元 素 。Code 


examples: 


使 用 指定 的 ghost 参数 初始 化 resizable : 


$( ".selector" ).resizable({ ghost: true }); 


在 初始 化 后 设置 或 者 获取 ghost 参数 : 


// getter 
var ghost = $( ".selector" ).resizable( "option", "ghost" ); 


// setter 
$( ".selector" ).resizable( "option", "ghost", true ); 


gridType: Array 


Default: false 设置 调整 x 和 y 改 变 的 像素 . 调整 大 小 的 元 素 到 网 格 ， 
[x, y, Code examples: 


使 用 指定 的 grid 参数 初始 化 resizable : 


$( ".selector" ).resizable({ grid: [ 20, 10 ] 3); 


在 初始 化 后 设置 或 者 获取 grid 参数 : 


// getter 
var grid = $( ".selector" ).resizable( "option", "grid" ); 


// setter 
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); 


handlesType: String or Object 


每 x 和 y 个 像素 。 数 组 值 : 


Default: "e, s, se" 哪个 义理 程序 被 用 来 resizing (缩放 大 小 ) 。 人 允许 使 用 的 值 : 


。 String: 如 果 指 定 一 个 字符 串 , 应 该 是 下 列 清单 中 的 组 合 :'n, e, s, w, ne, se, sw, nw, all, 


项 之 间 使 用 逗号 分 隔 . 必要 的 手柄 将 由 插件 自动 生成 . 
e Object: 


如 果 指 定 一 个 对 象 , 要 支持 下 面 的 键 值 : { n, e, s, w ne, se, sw, nw}. 指定 的 用 户 调整 手柄 
的 任何 值 应 该 是 一 个 jQuery 选择 器 匹配 的 子 元 素 . 如 果 该 操作 柄 不 是 resizable 的 一 个 子 元 
R, 你 可 以 提供 一 个 有 效 的 DOMEIlement 或 者 直接 提供 一 个 jQuery 对 象 . 


注意 : 当 生 成 您 自己 的 手柄 ， 每 个 手柄 必须 有 ui-resizable-handie 样式 类 ， 以 及 适当 


的 ui-resizable- {direction} 样式 X, 例 如 ui-resizable-s o 


Code examples: 


使 用 指定 的 handles 参数 初始 化 resizable : 


$( ".selector" ).resizable({ handles: "n, e, s, w" 3); 


在 初始 化 后 设置 或 者 获取 handles SR: 


// getter 
var handles = $( ".selector" ).resizable( "option", "handles" ); 


// setter 
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); 


helperType: String 


Default: false 为 大 小 调整 时 的 代理 元 素 指定 一 个 css 样 式 . 当 调整 完成 时 ,这 
以 前 的 状态 .Code examples: 


使 用 指定 的 helper 参数 初始 化 resizable : 


$( ".selector" ).resizable({ helper: "resizable-helper" }); 


在 初始 化 后 设置 或 者 获 RAY helper 参数 : 


// getter 
var helper = $( ".selector" ).resizable( "option", "helper" ); 


// setter 
$( ".selector" ).resizable( "option", "helper", "resizable-helper" ); 


maxHeightType: Number 


Default: null 为 大 小 调整 设 定 一 个 最 大 高 度 .Code examples: 


使 用 指定 的 maxHeight 参数 初始 化 resizable : 


$( ".selector" ).resizable({ maxHeight: 300 }); 


在 初始 化 后 设置 或 者 获取 maxHeight BR: 
// getter 
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" ); 


// setter 
$( ".selector" ).resizable( "option", "maxHeight", 300 ); 


maxWidthType: Number 


Default: null 为 大 小 调整 设 定 一 个 最 大 宽度 .Code examples: 


使 用 指定 的 maxwidth 参数 初始 化 resizable : 


$( ".selector" ).resizable({ maxwidth: 300 }); 


在 初始 化 后 设置 或 者 获取 maxwidth 参数 : 
// getter 
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "maxWidth", 300 ); 


minHeightType: Number 
Default: 10 为 大 小 调整 设 定 一 个 最 小 高 度 .Code examples: 


使 用 指定 的 minHeight 参数 初始 化 resizable : 


$( ".selector" ).resizable({ minHeight: 150 }); 


在 初始 化 后 设置 或 者 获取 minheight SR: 


// getter 
var minHeight = $( ".selector" ).resizable( "option", "minHeight" ); 


// setter 
$( ".selector" ).resizable( "option", "minHeight", 150 ); 


minWidthType: Number 


Default: 10 为 大 小 调整 设 定 一 个 最 小 宽度 .Code examples: 


使 用 指定 的 minwidth 参数 初始 化 resizable : 


$( ".selector" ).resizable({ minWidth: 150 }); 


在 初始 化 后 设置 或 者 获取 minwidth 参数 : 
// getter 
var minWidth = $( ".selector" ).resizable( "option", "minWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "minwidth", 150 ); 


Methods 


destroy() 

完全 移 除 调整 功能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).resizable( "destroy" ); 


disable() 


X resizable. 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).resizable( "disable" ); 


enable() 


打开 resizable. 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).resizable( "enable" ); 


option( optionName )Returns: Object 
通过 指定 的 optionName ， 获 取 当 前 关联 的 值 。 
e optionNameType: String 要 获取 值 的 选项 名 


Code examples: 


调用 这 个 方法 : 


var isDisabled = $( ".selector" ).resizable( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 对 象 ， 它 包含 表示 当前 resizable 的 选项 hash 的 键 / 值 对 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 

调用 这 个 方法 : 


var options = $( ".selector" ).resizable( "option" ); 


option( optionName, value ) 
通过 指定 的 optionName ， 设 置 resizable 的 相关 选项 值 。 


e optionNameType: String 要 设置 值 的 选项 名 。 
e valueType: Object 要 设置 选项 的 值 。 


Code examples: 


调用 这 个 方法 : 


$( ".selector" ).resizable( "option", "disabled", true ); 


option( options ) 
为 resizable 设 置 一 个 或 多 个 选项 。 

。 optionsType: Object 设置 的 选项 / 值 对 的 对 象 。 
Code examples: 


调用 这 个 方法 : 


$( ".selector" ).resizable( "option", { disabled: true } ); 


widget()Returns: jQuery 


返回 一 个 jQuery ， 它 包含 了 resizable 元 素 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 
调用 widget 方法 : 


var widget = $( ".selector" ).resizable( "widget" ); 


Events 


create( event, ui )Type: resizecreate 


此 事件 会 在 resizable 创 建 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 create 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
create: function( event, ui ) (3 


3): 


绑 定 一 个 事件 监听 到 resizecreate 事 件 : 


$( ".selector" ).on( "resizecreate", function( event, ui ) {} ); 


resize( event, ui )Type: resize 


这 个 事件 将 在 拖 动 手柄 进行 调整 时 触发 . 


e eventType: Event 
e uiType: Object 
o elementType: jQuery 一 个 jQuery 对 象 代表 被 resized 的 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 resized 元 素 的 助手 。 
o originalElementType: jQuery 一 个 jQuery 对 象 代表 被 包 囊 前 原先 的 元 素 。 
o originalPositionType: Objectresizable 元 素 被 resized (缩放 ) 前 的 CSS 的 
position 《位置 ) 对 象 ， 如 ( left, top} o 
o originalSizeType: Objectresizable 元 素 被 resized (缩放 ) 前 的 尺寸 对 象 ， 
如 ( width, height } o 


o positionType: Object 当前 可 resizable (缩放 ) 元 素 的 CSS 的 position (firi) 对 
象 ， 如 { top, left} 
o sizeType: Object 当 前 可 resizable (缩放 ) 元 素 的 尺寸 对 象 ， { width, height } o 


Code examples: 


使 用 指定 的 resize 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
resize: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 到 resize 事 件 : 


$( ".selector" ).on( "resize", function( event, ui ) {} ); 


start( event, ui )Type: resizestart 
这 个 事件 将 在 调整 操作 开始 时 触发 . 


e eventType: Event 
e uiType: Object 
o elementType: jQuery 一 个 jQuery 对 象 代表 被 resized 的 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 resized 元 素 的 助手 。 
o originalElementType: jQuery 一 个 jQuery 对 象 代 表 被 包 衷 前 原先 的 元 素 。 
o originalPositionType: Objectresizable 元 素 被 resized (缩放 ) 前 的 CSS 的 
position (E) 对 象 ， 如 ( left, top} o 
o originalSizeType: Objectresizable 元 素 被 resized (缩放 ) 前 的 尺寸 对 象 ， 
如 { width, height } o 
o positionType: Object 当前 可 resizable (缩放 ) 元 素 的 CSS 的 position (位 置 ) 对 
象 ， 如 { top, left} 
o sizeType: Object 当 前 可 resizable (缩放 ) 元 素 的 尺寸 对 象 ， { width, height } o 


Code examples: 


使 用 指定 的 start 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 resizestart 事件 : 


$( ".selector" ).on( "resizestart", function( event, ui ) {} ); 


stop( event, ui )Type: resizestop 


这 个 事件 将 在 调整 操作 结束 后 触发 . 


e eventType: Event 


e uiType: Object 


o 


o 


o 


o 


o 


elementType: jQuery 一 个 jQuery 对 象 代表 被 resized 的 元 素 。 

helperType: jQuery 一 个 jQuery 对 象 代 表 被 resized 元 素 的 助手 。 
originalElementType: jQuery 一 个 jQuery 对 象 代表 被 包 于 前 原先 的 元 素 。 
originalPositionType: Objectresizable 元 素 被 resized (缩放 ) 前 的 CSS 的 
position 《位置 ) 对 象 ， 如 ( left, top} o 

originalSizeType: Objectresizable 元 素 被 resized (缩放 ) 前 的 尺寸 对 象 ， 

如 { width, height } o 

positionType: Object 当前 可 resizable (缩放 ) 元 素 的 CSS 的 position (firi) 对 
象 ， 如 { top, left} 

sizeType: Object 当 前 可 resizable (缩放 ) 元 素 的 尺寸 对 象 ， { width, height } o 


Code examples: 


使 用 指定 的 stop 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
stop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 resizestop 事件 : 


$( ".selector" ).on( "resizestop", function( event, ui ) {} ); 


Example: 


A simple jQuery UI Resizable. 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>resizable demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#resizable { 
width: 100px; 
height: 100px; 
background: #ccc; 
} </style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div id="resizable"></div> 
<script> 
$( "#resizable" ).resizable(); 


</script> 


</body> 
</html> 
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Resizable Widget 


Categories: Interactions 


version added: 1.0 


Description: 使 用 鼠标 改变 一 个 元 素 的 尺寸 。 


QuickNavExamples 


Options 


e alsoResize 

e animate 

e animateDuration 
e animateEasing 
e aspectRatio 

e autoHide 

e cancel 

e containment 
e delay 

e disabled 

e distance 

e ghost 

e grid 

e handles 

e helper 

e maxHeight 

e maxWidth 

e minHeight 

e minWidth 


Methods 


e destroy 


disable 
e enable 
e option 


e widget 


Events 


e create 
e resize 
e start 
e stop 


jQuery UI Resizable 插件 使 选 定 的 内 容 可 以 调整 大 小 (这 以 为 着 那么 拥有 一 些 可 以 拖 动 的 手 
柄 ). 你 可 以 指定 一 个 或 者 多 个 操作 手柄 以 及 指定 最 小 和 最 大 宽度 与 高 度 . 
Dependencies 


e Ul Core 
e Widget Factory 
e Mouse Interaction 


其 他 注意 事项 : 
e 这 个 widget 需要 一 些 功能 性 的 CSS， 否 则 将 无 法 正常 工作 。 如 果 你 建立 一 个 自 定义 的 主 


题 ， 使 用 widget 指定 的 CSS 文 件 作 为 一 个 激活 点 。 


Options 


alsoResizeType: Selector or jQuery or Element 


Default: false 在 重读 元素 尺寸 大 小 的 同时 重 置 指定 的 一 个 或 多 个 元 素 的 尺寸 大 小 。Code 
examples: 


使 用 指定 的 alsoResize 参数 初始 化 resizable : 


$( ".selector" ).resizable({ alsoResize: "#mirror" 3); 


在 初始 化 后 设置 或 者 获取 alsoResize 参数 : 
// getter 
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" ); 


// setter 
$( ".selector" ).resizable( "option", "alsoResize", "#mirror" ); 


animateType: Boolean 
Default: false 在 调整 大 小 后 使 用 一 段 动画 完成 调整 .Code examples: 


使 用 指定 的 animate 参数 初始 化 resizable : 


$( ".selector" ).resizable({ animate: true }); 


在 初始 化 后 设置 或 者 获取 animate SR: 


// getter 
var animate = $( ".selector" ).resizable( "option", "animate" ); 


// setter 
$( ".selector" ).resizable( "option", "animate", true ); 


animateDurationType: Number or String 
Default: "slow" 当 使 用 animate 选项 时 ， 动 画 持 续 的 时 间 。 单 位 毫秒 。 人 允许 使 用 的 值 : 


e Number: 毫秒 数 。 
e String: 一 个 表示 持续 时 间 的 字符 串 ， 比 如 "slow" or "fast" o 


Code examples: 


使 用 指定 的 animateDuration 参数 初始 化 resizable : 


$( ".selector" ).resizable({ animateDuration: "fast" }); 


在 初始 化 后 设置 或 者 获取 animateDuration 参数 : 


// getter 
var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" ); 


// setter 
$( ".selector" ).resizable( "option", "animateDuration", "fast" ); 


animateEasingType: String 


Default: "swing" 动画 执行 时 的 缓冲 效果 。 当 使 用 animate 选项 时 ， 哪 个 easing GEBEN 
数 ) 被 应 用 。Code examples: 


使 用 指定 的 animateEasing 参数 初始 化 resizable : 


$( ".selector" ).resizable({ animateEasing: "easeOutBounce" }); 


在 初始 化 后 设置 或 者 获取 animateEasing 参数 : 


// getter 
var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" ); 


// setter 
$( ".selector" ).resizable( "option", "animateEasing", "easeOutBounce" ); 


aspectRatioType: Boolean or Number 


Default: false 该 元 素 是 否 应 限制 在 一 个 特定 的 比例 进行 缩放 。 人 允许 使 用 的 值 : 


e Boolean: 如 果 设 置 为 true , 大 小 将 按照 原先 的 宽 高 比 进行 调整 。 
e Number: 强制 元 素 调 整 大 小 时 保持 一 个 特定 的 宽 高 比 。 


Code examples: 


使 用 指定 的 aspectRatio 参数 初始 化 resizable : 


$( ".selector" ).resizable({ aspectRatio: true }); 


在 初始 化 后 设置 或 者 获取 aspectRatio SR: 


// getter 
var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" ); 


// setter 
$( ".selector" ).resizable( "option", "aspectRatio", true ); 


autoHideType: Boolean 


Default: false 如 果 设 置 为 真 , 将 会 自动 隐藏 调整 手柄 图 标 ,除非 鼠标 移动 到 该 元 素 上 .Code 
examples: 


使 用 指定 的 autouide 参数 初始 化 resizable : 


$( ".selector" ).resizable({ autoHide: true }); 


在 初始 化 后 设置 或 者 获取 autoHide SM: 


// getter 
var autoHide = $( ".selector" ).resizable( "option", "autoHide" ); 


// setter 
$( ".selector" ).resizable( "option", "autoHide", true ); 


cancelType: Selector 


Default: "input, textarea, button, select, option" 如 果 设 置 了 选择 器 匹配 ,将 拒绝 对 匹配 元 素 的 


大 小 调整 .Code examples: 


使 用 指定 的 cancel 参数 初始 化 resizable : 


$( ".selector" ).resizable({ cancel: ".cancel" }); 


在 初始 化 后 设置 或 者 获取 cancel SR: 
// getter 
var cancel = $( ".selector" ).resizable( "option", "cancel" ); 


// setter 
$( ".selector" ).resizable( "option", "cancel", ".cancel" ); 


containmentType: Selector or Element or String 


Default: false 使 用 指定 的 元 素 强制 性 限制 大 小 调整 的 界限 .允许 使 用 的 值 : 


e Selector:resizable 元 素 将 被 限制 在 该 选择 器 匹配 的 第 一 个 元 素 的 边界 内 。 


的 元 素 ， 那 么 设置 将 不 起 作用 。 
。 Element: resizable 元 素 将 被 限制 在 这 个 元 素 的 边界 内 。 
e String: 可 能 的 值 : "parent" 和 "document" . 


Code examples: 


使 用 指定 的 containment 参数 初始 化 resizable : 


$( ".selector" ).resizable({ containment: "parent" 3); 


在 初始 化 后 设置 或 者 获取 containment 参数 : 


// getter 


var containment = $( ".selector" ).resizable( "option", "containment" ); 


// setter 
$( ".selector" ).resizable( "option", "containment", "parent" ); 


delayType: Number 


Default: o 设 定 需 要 经 过 多 少 毫 秒 以 后 调整 才 会 开始 . 如 果 指 定 了 该 参数 , 调整 


如 果 没 有 匹配 


会 马上 开始 ， 


除非 鼠标 调整 动作 已 经 持续 了 指定 的 时 间 . 这 可 以 防止 误 操 作对 元 素 进 行 了 非 预 期 的 调 


整 .Code examples: 


使 用 指定 的 delay 参数 初始 化 resizable : 


$( ".selector" ).resizable({ delay: 150 }); 


在 初始 化 后 设置 或 者 获取 delay SR: 


// getter 
var delay = $( ".selector" ).resizable( "option", "delay" ); 


// setter 
$( ".selector" ).resizable( "option", "delay", 150 ); 


disabledType: Boolean 
Default: false 如 果 设 置 为 true 将 禁止 resizable (缩放 ) o Code examples: 


使 用 指定 的 disabled 参数 初始 化 resizable : 


$( ".selector" ).resizable({ disabled: true }); 


在 初始 化 后 设置 或 者 获取 disabled SR: 


// getter 
var disabled = $( ".selector" ).resizable( "option", "disabled" ); 


// setter 
$( ".selector" ).resizable( "option", "disabled", true ); 
distanceType: Number 


Default: 1 设 定 调整 操作 需要 移动 多 少 个 像素 后 调整 才 会 开始 . 如 果 指 定 了 该 参数 , 调整 不 会 
马上 开始 ,直到 鼠标 移动 了 指定 的 像素 后 .这 可 以 防止 误 操 作对 元 素 进行 了 非 预 期 的 调整 .Code 
examples: 


使 用 指定 的 distance 参数 初始 化 resizable : 


$( ".selector" ).resizable({ distance: 30 }); 


在 初始 化 后 设置 或 者 获取 distance 参数 : 


// getter 
var distance = $( ".selector" ).resizable( "option", "distance" ); 


// setter 
$( ".selector" ).resizable( "option", "distance", 30 ); 


ghostType: Boolean 


Default: false 如 果 设 置 为 true , 将 会 在 调整 过 程 中 看 到 一 个 半 透 明 的 辅助 元 素 。Code 


examples: 


使 用 指定 的 ghost 参数 初始 化 resizable : 


$( ".selector" ).resizable({ ghost: true }); 


在 初始 化 后 设置 或 者 获取 ghost 参数 : 


// getter 
var ghost = $( ".selector" ).resizable( "option", "ghost" ); 


// setter 
$( ".selector" ).resizable( "option", "ghost", true ); 


gridType: Array 


Default: false 设置 调整 x 和 y 改 变 的 像素 . 调整 大 小 的 元 素 到 网 格 ， 
[x, y, Code examples: 


使 用 指定 的 grid 参数 初始 化 resizable : 


$( ".selector" ).resizable({ grid: [ 20, 10 ] 3); 


在 初始 化 后 设置 或 者 获取 grid 参数 : 


// getter 
var grid = $( ".selector" ).resizable( "option", "grid" ); 


// setter 
$( ".selector" ).resizable( "option", "grid", [ 20, 10 ] ); 


handlesType: String or Object 


每 x 和 y 个 像素 。 数 组 值 : 


Default: "e, s, se" 哪个 义理 程序 被 用 来 resizing (缩放 大 小 ) 。 人 允许 使 用 的 值 : 


。 String: 如 果 指 定 一 个 字符 串 , 应 该 是 下 列 清单 中 的 组 合 :'n, e, s, w, ne, se, sw, nw, all, 


项 之 间 使 用 逗号 分 隔 . 必要 的 手柄 将 由 插件 自动 生成 . 
e Object: 


如 果 指 定 一 个 对 象 , 要 支持 下 面 的 键 值 : { n, e, s, w ne, se, sw, nw}. 指定 的 用 户 调整 手柄 
的 任何 值 应 该 是 一 个 jQuery 选择 器 匹配 的 子 元 素 . 如 果 该 操作 柄 不 是 resizable 的 一 个 子 元 
R, 你 可 以 提供 一 个 有 效 的 DOMEIlement 或 者 直接 提供 一 个 jQuery 对 象 . 


注意 : 当 生 成 您 自己 的 手柄 ， 每 个 手柄 必须 有 ui-resizable-hande 样式 类 ， 以 及 适当 


的 ui-resizable- {direction} 样式 X, 例 如 ui-resizable-s o 


Code examples: 


使 用 指定 的 handles 参数 初始 化 resizable : 


$( ".selector" ).resizable({ handles: "n, e, s, w" 3); 


在 初始 化 后 设置 或 者 获取 handles SR: 


// getter 
var handles = $( ".selector" ).resizable( "option", "handles" ); 


// setter 
$( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); 


helperType: String 


Default: false 为 大 小 调整 时 的 代理 元 素 指定 一 个 css 样 式 . 当 调整 完成 时 ,这 
以 前 的 状态 .Code examples: 


使 用 指定 的 helper 参数 初始 化 resizable : 


$( ".selector" ).resizable({ helper: "resizable-helper" }); 


在 初始 化 后 设置 或 者 获 RAY helper 参数 : 


// getter 
var helper = $( ".selector" ).resizable( "option", "helper" ); 


// setter 
$( ".selector" ).resizable( "option", "helper", "resizable-helper" ); 


maxHeightType: Number 


Default: null 为 大 小 调整 设 定 一 个 最 大 高 度 .Code examples: 


使 用 指定 的 maxHeight 参数 初始 化 resizable : 


$( ".selector" ).resizable({ maxHeight: 300 }); 


在 初始 化 后 设置 或 者 获取 maxHeight BR: 
// getter 
var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" ); 


// setter 
$( ".selector" ).resizable( "option", "maxHeight", 300 ); 


maxWidthType: Number 


Default: null 为 大 小 调整 设 定 一 个 最 大 宽度 .Code examples: 


使 用 指定 的 maxwidth 参数 初始 化 resizable : 


$( ".selector" ).resizable({ maxwidth: 300 }); 


在 初始 化 后 设置 或 者 获取 maxwidth 参数 : 
// getter 
var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "maxWidth", 300 ); 


minHeightType: Number 
Default: 10 为 大 小 调整 设 定 一 个 最 小 高 度 .Code examples: 


使 用 指定 的 minHeight 参数 初始 化 resizable : 


$( ".selector" ).resizable({ minHeight: 150 }); 


在 初始 化 后 设置 或 者 获取 minheight SR: 


// getter 
var minHeight = $( ".selector" ).resizable( "option", "minHeight" ); 


// setter 
$( ".selector" ).resizable( "option", "minHeight", 150 ); 


minWidthType: Number 


Default: 10 为 大 小 调整 设 定 一 个 最 小 宽度 .Code examples: 


使 用 指定 的 minwidth 参数 初始 化 resizable : 


$( ".selector" ).resizable({ minWidth: 150 }); 


在 初始 化 后 设置 或 者 获取 minwidth 参数 : 
// getter 
var minWidth = $( ".selector" ).resizable( "option", "minWidth" ); 


// setter 
$( ".selector" ).resizable( "option", "minwidth", 150 ); 


Methods 


destroy() 

完全 移 除 调整 功能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).resizable( "destroy" ); 


disable() 


X resizable. 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).resizable( "disable" ); 


enable() 


打开 resizable. 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).resizable( "enable" ); 


option( optionName )Returns: Object 
通过 指定 的 optionName ， 获 取 当 前 关联 的 值 。 
e optionNameType: String 要 获取 值 的 选项 名 


Code examples: 


调用 这 个 方法 : 


var isDisabled = $( ".selector" ).resizable( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 对 象 ， 它 包含 表示 当前 resizable 的 选项 hash 的 键 / 值 对 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 

调用 这 个 方法 : 


var options = $( ".selector" ).resizable( "option" ); 


option( optionName, value ) 
通过 指定 的 optionName ， 设 置 resizable 的 相关 选项 值 。 


e optionNameType: String 要 设置 值 的 选项 名 。 
e valueType: Object 要 设置 选项 的 值 。 


Code examples: 


调用 这 个 方法 : 


$( ".selector" ).resizable( "option", "disabled", true ); 


option( options ) 
为 resizable 设 置 一 个 或 多 个 选项 。 

。 optionsType: Object 设置 的 选项 / 值 对 的 对 象 。 
Code examples: 


调用 这 个 方法 : 


$( ".selector" ).resizable( "option", { disabled: true } ); 


widget()Returns: jQuery 


返回 一 个 jQuery ， 它 包含 了 resizable 元 素 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 
调用 widget 方法 : 


var widget = $( ".selector" ).resizable( "widget" ); 


Events 


create( event, ui )Type: resizecreate 


此 事件 会 在 resizable 创 建 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 create 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
create: function( event, ui ) (3 


3): 


绑 定 一 个 事件 监听 到 resizecreate 事 件 : 


$( ".selector" ).on( "resizecreate", function( event, ui ) {} ); 


resize( event, ui )Type: resize 


这 个 事件 将 在 拖 动 手柄 进行 调整 时 触发 . 


e eventType: Event 
e uiType: Object 
o elementType: jQuery 一 个 jQuery 对 象 代表 被 resized 的 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 resized 元 素 的 助手 。 
o originalElementType: jQuery 一 个 jQuery 对 象 代表 被 包 囊 前 原先 的 元 素 。 
o originalPositionType: Objectresizable 元 素 被 resized (缩放 ) 前 的 CSS 的 
position 《位置 ) 对 象 ， 如 ( left, top} o 
o originalSizeType: Objectresizable 元 素 被 resized (缩放 ) 前 的 尺寸 对 象 ， 
如 ( width, height } o 


o positionType: Object 当前 可 resizable (缩放 ) 元 素 的 CSS 的 position (firi) 对 
象 ， 如 { top, left} 
o sizeType: Object 当 前 可 resizable (缩放 ) 元 素 的 尺寸 对 象 ， { width, height } o 


Code examples: 


使 用 指定 的 resize 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
resize: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 到 resize 事 件 : 


$( ".selector" ).on( "resize", function( event, ui ) {} ); 


start( event, ui )Type: resizestart 
这 个 事件 将 在 调整 操作 开始 时 触发 . 


e eventType: Event 
e uiType: Object 
o elementType: jQuery 一 个 jQuery 对 象 代表 被 resized 的 元 素 。 
o helperType: jQuery 一 个 jQuery 对 象 代表 被 resized 元 素 的 助手 。 
o originalElementType: jQuery 一 个 jQuery 对 象 代 表 被 包 衷 前 原先 的 元 素 。 
o originalPositionType: Objectresizable 元 素 被 resized (缩放 ) 前 的 CSS 的 
position (E) 对 象 ， 如 ( left, top} o 
o originalSizeType: Objectresizable 元 素 被 resized (缩放 ) 前 的 尺寸 对 象 ， 
如 { width, height } o 
o positionType: Object 当前 可 resizable (缩放 ) 元 素 的 CSS 的 position (位 置 ) 对 
象 ， 如 { top, left} 
o sizeType: Object 当 前 可 resizable (缩放 ) 元 素 的 尺寸 对 象 ， { width, height } o 


Code examples: 


使 用 指定 的 start 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 resizestart 事件 : 


$( ".selector" ).on( "resizestart", function( event, ui ) {} ); 


stop( event, ui )Type: resizestop 


这 个 事件 将 在 调整 操作 结束 后 触发 . 


e eventType: Event 


e uiType: Object 


o 


o 


o 


o 


o 


elementType: jQuery 一 个 jQuery 对 象 代表 被 resized 的 元 素 。 

helperType: jQuery 一 个 jQuery 对 象 代 表 被 resized 元 素 的 助手 。 
originalElementType: jQuery 一 个 jQuery 对 象 代表 被 包 于 前 原先 的 元 素 。 
originalPositionType: Objectresizable 元 素 被 resized (缩放 ) 前 的 CSS 的 
position 《位置 ) 对 象 ， 如 ( left, top} o 

originalSizeType: Objectresizable 元 素 被 resized (缩放 ) 前 的 尺寸 对 象 ， 

如 { width, height } o 

positionType: Object 当前 可 resizable (缩放 ) 元 素 的 CSS 的 position (firi) 对 
象 ， 如 { top, left} 

sizeType: Object 当 前 可 resizable (缩放 ) 元 素 的 尺寸 对 象 ， { width, height } o 


Code examples: 


使 用 指定 的 stop 回调 初始 化 一 个 resizable : 


$( ".selector" ).resizable({ 
stop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 resizestop 事件 : 


$( ".selector" ).on( "resizestop", function( event, ui ) {} ); 


Example: 


A simple jQuery UI Resizable. 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>resizable demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#resizable { 
width: 100px; 
height: 100px; 
background: #ccc; 
} </style> 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<div id="resizable"></div> 
<script> 
$( "#resizable" ).resizable(); 


</script> 


</body> 
</html> 
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Selectable Widget 


Categories: Interactions 


version added: 1.0 


Description: 使 用 鼠标 选择 一 个 或 一 组 元 素 。 


QuickNavExamples 


Options 


e append To 

e autoRefresh 
e cancel 

e delay 
disabled 
distance 


e filter 
e tolerance 


Methods 


e destroy 
e disable 
e enable 
e option 

e refresh 
e widget 


Events 


e create 

e selected 
e selecting 
e start 

e stop 

e unselected 


e unselectingjQuery UI Selectable 插件 允许 一 个 元 素 被 鼠标 划 出 的 选择 区 域 选中 . 同样 , 元 
素 也 可 以 被 点 击 选中 或 者 同时 按 住 Ctrl/Meta 键 , 允许 多 个 ( 非 连续 ) 的 选择 


依赖 天 系 


e Ul Core 
e Widget Factory 
e Mouse Interaction 


其 他 注意 事项 


。 这 个 widget 需要 一 些 功 能 性 的 CSS， 否 则 将 无 法 正常 工作 。 如 果 你 建立 一 个 自 定 义 的 主 
题 ， 使 用 widget 指定 的 CSS 文 件 作为 一 个 激活 点 。 


Options 


appendToType: Selector 


Default: "body" 选择 帮手 (BR) 应 追加 到 哪个 元 素 Code examples: 


使 用 指定 的 appendTo 参数 初始 化 selectable : 


$( ".selector" ).selectable({ appendTo: "#someElem" }); 


在 初始 化 后 设置 或 者 获取 appendto 选项 : 


// getter 

var appendTo = $( ".selector" ).selectable( "option", "appendTo" ); 
// setter 

$( ".selector" ).selectable( "option", "appendTo", "#someElem" ); 


autoRefreshType: Boolean 


Default: true 这 个 选项 确定 每 个 选择 操作 开始 时 如 何 刷新 (重新 计算 ) 每 个 选择 项 的 位 置 和 大 
小 . 如 果 你 有 很 多 很 多 选择 项 , 你 应 当 设 置 此 项 为 false 并 且 手 动 调用 refresh() 方法 .Code 
examples: 


使 用 指定 的 autoRefresh 参数 初始 化 selectable : 


$( ".selector" ).selectable({ autoRefresh: false }); 


在 初始 化 后 设置 或 者 获取 autoRefresh 选项 : 


// getter 
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" ); 


// setter 
$( ".selector" ).selectable( "option", "autoRefresh", false ); 


cancelType: Selector 


Default: "input, textarea, button, select, option" 如 果 你 使 用 了 匹配 选择 器 ,符合 匹配 的 元 素 将 
被 禁止 可 选 .Code examples: 


使 用 指定 的 cancel 参数 初始 化 selectable : 


$( ".selector" ).selectable({ cancel: "a,.cancel" }); 


在 初始 化 后 设置 或 者 获取 cancel 选项 : 


// getter 
var cancel = $( ".selector" ).selectable( "option", "cancel" ); 


// setter 
$( ".selector" ).selectable( "option", "cancel", "a,.cancel" ); 


delayType: Integer 


Default: o 定义 需要 经 过 多 少 毫 秒 后 选择 才 会 开始 . 这 可 以 预防 意外 的 点 击 造成 元 素 被 选 
择 .Code examples: 


使 用 指定 的 delay 参数 初始 化 selectable : 


$( ".selector" ).selectable({ delay: 150 }); 


在 初始 化 后 设置 或 者 获取 delay 选项 : 


// getter 
var delay = $( ".selector" ).selectable( "option", "delay" ); 


// setter 
$( ".selector" ).selectable( "option", "delay", 150 ); 


disabledType: Boolean 


Default: false 如 果 设 置 为 true 将 禁止 selectable。Code examples: 


使 用 指定 的 disabled 参数 初始 化 selectable : 


$( ".selector" ).selectable({ disabled: true }); 


在 初始 化 后 设置 或 者 获取 disabled 选项 : 
// getter 
var disabled = $( ".selector" ).selectable( "option", "disabled" ); 


// setter 
$( ".selector" ).selectable( "option", "disabled", true ); 


distanceType: Number 


Default: o 定义 需要 移动 多 少 个 像素 选择 才 会 开始 . 如 果 指 定 了 该 项 , 选择 不 会 马上 开始 ,而 是 
会 在 鼠标 移动 了 指定 像素 的 距离 之 后 才 会 开始 .Code examples: 


使 用 指定 的 distance 参数 初始 化 selectable : 


$( ".selector" ).selectable({ distance: 30 }); 


在 初始 化 后 设置 或 者 获取 distance 选项 : 
// getter 
var distance = $( ".selector" ).selectable( "option", "distance" ); 


// setter 
$( ".selector" ).selectable( "option", "distance", 30 ); 


filterType: Selector 


Default: "*" 匹配 子 元 素 中 那些 符合 条 件 的 元 素 才 可 以 被 选择 .Code examples: 
使 用 指定 的 filter 参数 初始 化 selectable : 


$( ".selector" ).selectable({ filter: "li" }); 


在 初始 化 后 设置 或 者 获取 filter 选项 : 
// getter 
var filter = $( ".selector" ).selectable( "option", "filter" ); 


// setter 
$( ".selector" ).selectable( "option", "filter", "li" ); 


toleranceType: String 


Default: "touch" 指定 那 种 模式 ， 用 来 测试 套 索 是 否 应 该 选择 一 个 项 目 。 人 允许 使 用 的 值 : 


。 "fit" : 套 索 完全 重 有 登 的 项 目 。 
。 "touch" : 套 索 重 台 的 项 目 任 何 部 分 。 


Code examples: 


使 用 指定 的 tolerance 参数 初始 化 selectable : 


$( ".selector" ).selectable({ tolerance: "fit" }); 


在 初始 化 后 设置 或 者 获取 tolerance 选项 : 
// getter 
var tolerance = $( ".selector" ).selectable( "option", "tolerance" ); 


// setter 
$( ".selector" ).selectable( "option", "tolerance", "fit" ); 


Methods 


destroy() 

完全 移 除 selectable 功 能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).selectable( "destroy" ) 


disable() 


禁用 selectable. 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).selectable( "disable" ); 


enable() 


启用 selectable. 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).selectable( "enable" ); 


option( optionName )Returns: Object 
通过 指定 的 optionName ， 获 取 当 前 关联 的 值 。 

。 optionNameType: String 要 获取 值 的 选项 名 
Code examples: 


调用 方法 : 


var isDisabled = $( ".selector" ).selectable( "option", "disabled" ) 


option()Returns: PlainObject 

获取 一 个 对 象 ， 它 包含 表示 当前 resizable 的 选项 hash 的 键 / 值 对 。 
。 这 个 方法 不 接受 任何 参数 。 

Code examples: 

调用 这 个 方法 : 


var options = $( ".selector" ).selectable( "option" ); 


option( optionName, value ) 
通过 指定 的 optionName ， 设 置 selectable 的 相关 选项 值 。 


e optionNameType: String 要 设置 值 的 选项 名 。 
e valueType: Object 要 设置 选项 的 值 。 


Code examples: 


调用 这 个 方法 : 


$( ".selector" ).selectable( "option", "disabled", true ); 


option( options ) 
为 selectable 设 置 一 个 或 多 个 选项 。 
。 optionsType: Object 用 来 设置 的 选项 / 值 对 的 对 象 。 
Code examples: 
调用 这 个 方法 : 


$( ".selector" ).selectable( "option", { disabled: true } ); 


refresh() 


刷新 每 个 选择 项 的 位 置 和 大 小 . 这 个 方法 用 来 手动 重新 计算 选择 项 的 位 置 和 大 小 ， 
在 autoRefresh 设置 为 false 时 很 有 用 。 


。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 refresh 方法 : 


$( ".selector" ).selectable( "refresh" ); 


widget()Returns: jQuery 


返回 一 个 jQuery ， 它 包含 了 selectable 元 素 。 
。 这 个 方法 不 接受 任何 参数 。 
Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).selectable( "widget" ); 


Events 


create( event, ui )Type: selectablecreate 


此 事件 会 在 selectable 创建 时 触发 。 


e eventType: Event 


e uiType: Object 
注意 ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 create 回调 初始 化 一 个 selectable : 


$( ".selector" ).selectable({ 
create: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 到 selectablecreate 事件 : 


$( ".selector" ).on( "selectablecreate", function( event, ui ) {} ); 


selected( event, ui )Type: selectableselected 


此 事件 会 在 选择 操作 结束 时 ， 在 添加 到 选择 的 每 个 元 素 上 触发 。 


e eventType: Event 
e uiType: Object 
o selectedType: Element 已 被 选择 的 selectable 项 。 


Code examples: 


使 用 指定 的 selected 回调 初始 化 一 个 selectable : 


$( ".selector" ).selectable({ 
selected: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 到 selectableselected 事 件 : 


$( ".selector" ).on( "selectableselected", function( event, ui ) {} ); 


selecting( event, ui )Type: selectableselecting 
此 事件 会 在 选择 操作 过 程 中 ， 在 添加 到 选择 的 每 个 元 素 上 触发 。 


e eventType: Event 
e uiType: Object 
o selectingType: Element 当 前 已 被 选择 的 selectable 项 。 


Code examples: 


使 用 指定 的 selecting 回调 初始 化 一 个 selectablec : 


$( ".selector" ).selectable({ 
selecting: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 selectableselecting 事件 : 


$( ".selector" ).on( "selectableselecting", function( event, ui ) {} ); 


start( event, ui )Type: selectablestart 
这 个 事件 将 在 选择 操作 开始 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 start 回调 初始 化 一 个 selectable : 


$( ".selector" ).selectable({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 到 selectablestart 事件 : 


$( ".selector" ).on( "selectablestart", function( event, ui ) {} ); 


stop( event, ui )Type: selectablestop 
这 个 事件 将 在 选择 操作 结束 后 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 对 象 ， 包 括 是 为 了 和 其 他 事件 的 一 致 性 。 
Code examples: 


使 用 指定 的 stop 回调 初始 化 一 个 selectable : 


$( ".selector" ).selectable({ 
stop: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 到 selectablestop 事件 : 


$( ".selector" ).on( "selectablestop", function( event, ui ) {} ); 


unselected( event, ui )Type: selectableunselected 


此 事件 会 在 选择 操作 结束 时 ， 在 从 选择 元 素 集合 中 移 除 的 每 个 元 素 上 触发 。 


e eventType: Event 
e uiType: Object 
o unselectedType: Element 已 被 取消 选中 的 可 选择 项 。 


Code examples: 


使 用 指定 的 unselected 回调 初始 化 一 个 selectable : 


$( ".selector" ).selectable({ 
unselected: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 到 selectableunselected 事件 : 


$( ".selector" ).on( "selectableunselected", function( event, ui ) {} ); 


unselecting( event, ui )Type: selectableunselecting 


此 事件 会 在 选择 操作 过 程 中 ， 在 从 选择 元 素 集合 中 移 除 的 每 个 元 素 上 触发 。 


e eventType: Event 
e uiType: Object 
o unselectingType: Element 当 前 已 被 取消 选中 的 可 选择 项 。 


Code examples: 


使 用 指定 的 unselecting 回调 初始 化 一 个 selectable : 


$( ".selector" ).selectable({ 
unselecting: function( event, ui ) {} 


3 


绑 定 一 个 事件 监听 到 selectableunselecting 事件 : 


$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} ); 


Example: 


A simple jQuery UI Selectable. 


<!doctype html» 
<html lang="en"> 
<head> 
«meta charset="utf-8"> 
<title>selectable demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
<style> 
#selectable .ui-selecting { 
background: #ccc; 


#selectable .ui-selected { 
background: #999; 


} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


«ul id="selectable"> 
<li>Item 1«/li» 
<li>Item 2«/1li» 
<li>Item 3«/li» 
<li>Item 4«/li» 
<li>Item 5«/li» 

</ul> 


<script> 
$( "#selectable" ).selectable(); 
</script> 


</body> 
</html> 
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Sortable Widget 


Categories: Interactions 


version added: 1.0 


Description: 使 用 鼠标 调整 列表 中 或 者 网 格 中 元 素 的 排序 。 


QuickNavExamples 


Options 


e append To 

e axis 

e cancel 

e connectWith 

e containment 

e cursor 

e cursorAt 

e delay 

e disabled 

e distance 

e dropOnEmpty 
e forceHelperSize 
e forcePlaceholderSize 
e grid 

e handle 

e helper 

e items 

e opacity 

e placeholder 

e revert 

e scroll 

e scrollSensitivity 
e scrollSpeed 

e tolerance 

e zindex 


Methods 


e cancel 

e destroy 

e disable 

e enable 

e option 

e refresh 

e refreshPositions 
e serialize 

e toArray 

e widget 


Events 


e activate 
e beforeStop 
e change 

e create 

e deactivate 
e out 

e over 

e receive 

e remove 

e sort 

e start 

e stop 

e update 


jQuery UI 可 排序 (Sortable) 插件 让 被 被 选择 的 元 素 通 过 鼠标 抑 搜 进行 排序 。 
注意 : 为 了 排序 表格 中 的 行 ， tbody 元 素 必 须 作 为 sortable 〈 可 排序 元 素 ) ， 而 不 是 


在 table 。 


Dependencies 


e Ul Core 
e Widget Factory 
e Mouse Interaction 


Options 


appendToType: jQuery or Element or Selector or String 


Default: "parent" 确定 可 移动 的 辅助 元 素 在 抑 动 时 可 以 被 添加 到 何 久 (例如 , ARB S/ 
zlndex 问 题 )。 支 持 多 种 类 型 : 


e jQuery: 一 个 jQuery 对 象 ， 包 含 辅助 (helper) 元 素 要 追加 到 的 元 素 。 

e Element: 要 被 追加 辅助 (helper) 元 素 的 元 素 。 

e Selector: 一 个 选择 器 ， 指 定 哪个 元 素 要 追加 辅助 (helper) 元 素 。 

e String: 字 符 串 "parent" 将 促使 助手 (helper) 成 为 sortable 项 目的 同 级 。 


Code examples: 


使 用 指定 的 appendto 参数 初始 化 sortable : 


$( ".selector" ).sortable({ appendTo: document.body }); 


在 初始 化 后 设置 或 者 获取 appendTo SM: 


// getter 
var appendTo = $( ".selector" ).sortable( "option", "appendTo" ); 


// setter 
$( ".selector" ).sortable( "option", "appendTo", document.body ); 


axisType: String 


Default: false 如 果 定 义 了 该 参数 , 元 素 可 以 在 水 平 或 垂直 方向 上 实现 拖 动 . 允许 使 用 的 
fà: "x", "y" , Code examples: 


使 用 指定 的 axis 参数 初始 化 sortable : 


$( ".selector" ).sortable({ axis: "x" 3); 


在 初始 化 后 设置 或 者 获取 eas 参数 : 


// getter 
var axis = $( ".selector" ).sortable( "option", "axis" ); 


// setter 
$( ".selector" ).sortable( "option", "axis", "x" ); 


cancelType: Selector 


Default: "input, textarea, button, select, option" 对 符合 选择 器 匹配 规则 的 元 素 不 进行 排 
序 。Code examples: 


使 用 指定 的 cancel 参数 初始 化 sortable : 


$( ".selector" ).sortable({ cancel: "a,button" }); 


在 初始 化 后 设置 或 者 获取 cancel 参数 : 


// getter 
var cancel = $( ".selector" ).sortable( "option", "cancel" ); 


// setter 
$( ".selector" ).sortable( "option", "cancel", "a,button" ); 


connectWithType: Selector 


Default: false 列表 中 的 项 目 需 被 连接 的 另 一 个 sortable 元 素 的 选择 器 。 这 是 一 个 单 向 关 
系 ， 如 果 您 想 要 项 目 被 双向 连接 ， 必 须 在 两 个 sortable 元 素 上 都 设置 connectwith 选 
项 。Code examples: 


使 用 指定 的 connectwith 参数 初始 化 sortable : 


$( ".selector" ).sortable({ connectWwith: "#shopping-cart" }); 


在 初始 化 后 设置 或 者 获取 connectwith 参数 : 


// getter 
var connectWith = $( ".selector" ).sortable( "option", "connectWith" ); 


// setter 
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" ); 


containmentType: Element or Selector or String 


Default: false 
定义 一 个 边界 ， 限 制 拖 动 范围 在 指定 的 DOM 元 素 内 。 


注意 : 为 限制 拖 动 范 围 ， 指 定 的 元 素 必 须 有 一 个 可 计算 的 宽度 和 高 度 (但 不 一 定 是 显 式 
89) 。 例 如 ， 如 果 你 的 sortable 元 素 的 子 元 素 有 float: left 样式 ， 并 且 指 

E containment: "parent" ， 那 么 sortable/parent 容 器 必须 要 有 float: left 样式 ， 或 者 他 将 
有 height: 0 样式 ， 导致 不 确定 的 行为 。 


支持 多 种 类 型 : 


e Element: 一 个 用 来 作为 容器 的 元 素 。 
e Selector: 一 个 选择 器 指定 的 元 素 ， 这 个 元 素 用 来 作为 容器 
e String: 一 个 字符 串 指定 的 元 素 ， 这 个 元 素 用 来 作为 容器 。 可 能 的 值 : "parent" , 


"document" , "window" o 
Code examples: 


使 用 指定 的 containment 参数 初始 化 sortable : 


$( ".selector" ).sortable({ containment: "parent" }); 


在 初始 化 后 设置 或 者 获取 containment BR : 
// getter 
var containment = $( ".selector" ).sortable( "option", "containment" ); 


// setter 
$( ".selector" ).sortable( "option", "containment", "parent" ); 


cursorType: String 


Default: "auto" 定义 排序 拖 动 时 的 鼠标 指针 样式 .Code examples: 


使 用 指定 的 cursor 参数 初始 化 sortable : 


$( ".selector" ).sortable({ cursor: "move" }); 


在 初始 化 后 设置 或 者 获取 cursor SR: 


// getter 
var cursor = $( ".selector" ).sortable( "option", "cursor" ); 


// setter 
$( ".selector" ).sortable( "option", "cursor", "move" ); 


cursorAtType: Object 


Default: false 移动 排序 元 素 或 助手 (helper) ， 这 样 光标 总 是 出 现 ， 以 便 从 相同 的 位 置 进行 
抑 搜 。 坐 标 可 通过 一 个 或 两 个 键 的 组 合成 一 个 哈 希 给 出 : 
{ top, left, right, bottom } o Code examples: 


使 用 指定 的 cursorat 参数 初始 化 sortable : 


$( ".selector" ).sortable({ cursorAt: { left: 5 } }); 


在 初始 化 后 设置 或 者 获取 cursorat SR: 


// getter 
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" ); 


// setter 
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); 


delayType: Integer 


Default: o 在 排序 抑 动 开始 多 少 宫 秒 后 元 素 才 开始 移动 . 这 可 以 防止 意外 的 点 击 造成 元 素 的 抑 


动 .Code examples: 


使 用 指定 的 delay 参数 初始 化 sortable : 


$( ".selector" ).sortable({ delay: 150 }); 


在 初始 化 后 设置 或 者 获取 delay SR: 


// getter 
var delay = $( ".selector" ).sortable( "option", "delay" ); 


// setter 
$( ".selector" ).sortable( "option", "delay", 150 ); 


disabledType: Boolean 
Default: false 如 果 设 置 为 true ， 将 禁用 sortable。Code examples: 


使 用 指定 的 disabled 参数 初始 化 sortable : 


$( ".selector" ).sortable({ disabled: true }); 


在 初始 化 后 设置 或 者 获取 disabled SR: 


// getter 
var disabled = $( ".selector" ).sortable( "option", "disabled" ); 


// setter 
$( ".selector" ).sortable( "option", "disabled", true ); 


distanceType: Number 


Default: 1 设置 当 排序 拖 动 开始 多 少 个 像素 之 后 元 素 才 开始 移动 .以 像素 计 。 
数 , 排序 不 会 马上 开始 ,直到 鼠标 移动 达到 了 指定 的 像素 值 .Code examples: 


使 用 指定 的 distance 参数 初始 化 sortable : 


如 果 指 定 了 该 参 


$( ".selector" ).sortable({ distance: 5 }); 


在 初始 化 后 设置 或 者 获取 distance SR: 
// getter 
var distance = $( ".selector" ).sortable( "option", "distance" ); 


// setter 
$( ".selector" ).sortable( "option", "distance", 5 ); 


dropOnEmptyType: Boolean 


Default: true WRA false ， 这 个 sortable 中 项 不 能 拖 动 到 一 个 空 的 sortable 中 。( 查 
看 connectwith 选项 .Code examples: 


使 用 指定 的 droponEmpty 参数 初始 化 sortable : 


$( ".selector" ).sortable({ dropOnEmpty: false }); 


在 初始 化 后 设置 或 者 获取 droponempty 参数 : 
// getter 
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" ); 


// setter 
$( ".selector" ).sortable( "option", "dropOnEmpty", false ); 


forceHelperSizeType: Boolean 


Default: false 如 果 为 true , 强迫 辅助 元 素 (helper) 有 一 个 尺寸 大 小 。Code examples: 


使 用 指定 的 forceHelperSize 参数 初始 化 sortable : 


$( ".selector" ).sortable({ forceHelperSize: true }); 


在 初始 化 后 设置 或 者 获取 forceHelpersize 参数 : 


// getter 
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" ); 


// setter 
$( ".selector" ).sortable( "option", "forceHelperSize", true ); 


forcePlaceholderSizeType: Boolean 


Default: false 如 果 为 true , 强迫 占 位 符 (placeholder) 有 一 个 尺寸 大 小 。Code 
examples: 


使 用 指定 的 forcePlaceholdersize 参数 初始 化 sortable : 


$( ".selector" ).sortable({ forcePlaceholderSize: true }); 


在 初始 化 后 设置 或 者 获取 forcePlaceholdersize 参数 : 


// getter 
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" ); 


// setter 
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true ); 


—<———————>EE——E—S — ——— ÁN.) 
gridType: Array 


Default: false 设置 排序 对 象 或 者 辅助 对 象 (helper) 有 一 个 x 和 y 边 距 ,( 单 位 :像素 ). 数组 值 : 
[ x, y ] 。Code examples: 


使 用 指定 的 grid 参数 初始 化 sortable : 


$( ".selector" ).sortable({ grid: [ 20, 10 ] }); 


在 初始 化 后 设置 或 者 获取 grid 参数 : 
// getter 
var grid = $( ".selector" ).sortable( "option", "grid" ); 


// setter 
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] ); 


handleType: Selector or Element 


Default: false 如 果 设 定 了 此 参数 ,那么 拖 动 会 在 对 象 内 指定 的 元 素 上 开始 .Code examples: 


使 用 指定 的 handle 参数 初始 化 sortable : 


$( ".selector" ).sortable({ handle: ".handle" }); 


在 初始 化 后 设置 或 者 获取 handle 参数 : 


// getter 
var handle = $( ".selector" ).sortable( "option", "handle" ); 


// setter 
$( ".selector" ).sortable( "option", "handle", ".handle" ); 


helperType: String or Function() 


Default: "original" 允许 使 用 一 个 辅助 元 素来 进行 拖 动 时 展示 . 所 提供 的 函数 在 拖 动 时 接受 
事件 和 对 象 元 素 , 并 且 需 要 返回 一 个 DOMEIlement 对 象 用 来 当 作 辅助 对 象 .允许 使 用 的 值 : 


。 String: ARREA "clone" ， 那 么 这 个 元 素 将 被 克隆 ， 并 且 克 隆 出 来 的 元 素 将 被 拖 动 。 
e Function: 一 个 汞 数 ， 将 返回 拖 搜 时 要 使 用 的 DOMEIlement。 画 数 接收 事件 ， 且 元 素 正 
被 排序 。 


Code examples: 


使 用 指定 的 helper 参数 初始 化 sortable : 


$( ".selector" ).sortable({ helper: "clone" }); 


在 初始 化 后 设置 或 者 获取 helper 参数 : 


// getter 

var helper = $( ".selector" ).sortable( "option", "helper" ); 
// setter 

$( ".selector" ).sortable( "option", "helper", "clone" ); 


itemsType: Selector 


Default: "> *" 指定 元 素 内 的 哪 一 个 项 目 应 是 sortable;, Code examples: 


使 用 指定 的 items 参数 初始 化 sortable : 


$( ".selector" ).sortable({ items: "> li" }); 


在 初始 化 后 设置 或 者 获取 items SR: 


// getter 
var items = $( ".selector" ).sortable( "option", "items" ); 


// setter 
$( ".selector" ).sortable( "option", "items", "> li" ); 


opacityType: Number 


Default: false 当 排 序 时 助手 (helper) 的 不 透明 度 。 从 0.01 到 1 。Code examples: 


使 用 指定 的 opacity 参数 初始 化 sortable : 


$( ".selector" ).sortable({ opacity: 0.5 }); 


在 初始 化 后 设置 或 者 获取 opacity 2X: 
// getter 
var opacity = $( ".selector" ).sortable( "option", "opacity" ); 


// setter 
$( ".selector" ).sortable( "option", "opacity", 0.5 ); 


placeholderType: String 


Default: false 要 应 用 的 class 名 称 ， 否 则 为 白色 空白 。Code examples: 


使 用 指定 的 placeholder 参数 初始 化 sortable : 


$( ".selector" ).sortable({ placeholder: "sortable-placeholder" }); 


在 初始 化 后 设置 或 者 获取 placeholder 参数 : 


// getter 
var placeholder = $( ".selector" ).sortable( "option", "placeholder" ); 


// setter 
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" ); 


revertType: Boolean or Number 


Default: false sortable 项 目 是 否 使 用 一 个 流畅 的 动画 还 原 到 它 的 新 位 置 。 支 持 多 个 类 型 : 


e Boolean: 当 设置 为 true ， 该 项 目 将 会 使 用 动画， 动画 使 用 默认 的 持续 时 间 。 
e Number: 动画 的 持续 时 间 ， 以 毫秒 计 。 


Code examples: 


使 用 指定 的 revert 参数 初始 化 sortable : 


$( ".selector" ).sortable({ revert: true }); 


在 初始 化 后 设置 或 者 获取 revert SR: 


// getter 
var revert = $( ".selector" ).sortable( "option", "revert" ); 


// setter 
$( ".selector" ).sortable( "option", "revert", true ); 


scrollType: Boolean 


Default: true 如 果 设 置 为 true ， 当 到 达 边 缘 时 页 面 会 滚动 。Code examples: 


使 用 指定 的 scroll 参数 初始 化 sortable : 


$( ".selector" ).sortable({ scroll: false }); 


在 初始 化 后 设置 或 者 获取 scroll SR: 
// getter 
var scroll = $( ".selector" ).sortable( "option", "scroll" ); 


// setter 
$( ".selector" ).sortable( "option", "scroll", false ); 


scrollSensitivityType: Number 
Default: 20 定义 鼠标 距离 边缘 多 少 距离 时 开始 滚动 。Code examples: 
使 用 指定 的 scrollsensitivity 参数 初始 化 sortable : 


$( ".selector" ).sortable({ scrollSensitivity: 10 }); 


在 初始 化 后 设置 或 者 获取 scrollsensitivity 参数 : 


// getter 
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" ); 


// setter 
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 ); 


scrollSpeedType: Number 


Default: 20 当 鼠 标 指针 获取 到 在 scrolisensitivity 距离 内 时 ， 窗 体 滚 动 的 速度 。 如 果 
scroll 选项 是 false 则 忽略 。Code examples: 


使 用 指定 的 scrollspeed 参数 初始 化 sortable : 


$( ".selector" ).sortable({ scrollSpeed: 40 }); 


在 初始 化 后 设置 或 者 获取 scrollspeed 参数 : 


// getter 
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" ); 


// setter 
$( ".selector" ).sortable( "option", "scrollSpeed", 40 ); 


toleranceType: String 


Default: "intersect" 指定 用 于 测试 项 目 被 移动 时 是 否 履 盖 在 另 一 个 项 目 上 的 模式 。 可 能 的 
值 : 


e "intersect" : 项 目 至 少 50% Æ & TERRE LE, 
e "pointer" : 鼠标 指针 重合 在 其 他 项 目 上 。 


Code examples: 


使 用 指定 的 tolerance 参数 初始 化 sortable : 


$( ".selector" ).sortable({ tolerance: "pointer" }); 


在 初始 化 后 设置 或 者 获取 tolerance 参数 : 
// getter 
var tolerance = $( ".selector" ).sortable( "option", "tolerance" ); 


// setter 
$( ".selector" ).sortable( "option", "tolerance", "pointer" ); 


zindexType: integer 


Default: 1000 当 被 排序 时 ， 元 素 / 助 手 (helper) 元 素 的 Z-index, Code examples: 


使 用 指定 的 zindex 参数 初始 化 sortable : 


$( ".selector" ).sortable({ zIndex: 9999 }); 


在 初始 化 后 设置 或 者 获取 zindex 参数 : 


// getter 
var zIndex = $( ".selector" ).sortable( "option", "zIndex" ); 


// setter 
$( ".selector" ).sortable( "option", "zIndex", 9999 ); 


Methods 


cancel() 


当前 排序 开始 时 ， 取 消 一 个 在 当前 sortable 中 的 改变 ， 且 恢复 到 之 前 的 状态 。 在 stop 和 
receive 回调 函数 中 非常 有 用 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 cancel 方法 : 


$( ".selector" ).sortable( "cancel" ); 


destroy() 

完全 移 除 sortable 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).sortable( "destroy" ); 


disable() 


禁用 sortable. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).sortable( "disable" ); 


enable() 
启用 sortable. 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).sortable( "enable" ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).sortable( "option", "disabled" 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 sortable 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 该 方法 : 


var options = $( ".selector" ).sortable( "option" ); 


option( optionName, value ) 
设置 与 指定 的 optionName 关联 的 sortable 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).sortable( "option", "disabled", true ) 


option( options ) 
为 sortable 设置 一 个 或 多 个 选项 。 


e optionsType: Object 要 设置 的 option-value 对 。 


Code examples: 
调用 该 方法 : 


$( ".selector" ).sortable( "option", { disabled: true } ); 


refresh() 


刷新 sortable 项 目 。 触 发 所 有 sortable 项 目 重新 加 载 ， 导 致 新 的 项 目 被 认可 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 refresh 方法 : 


$( ".selector" ).sortable( "refresh" ); 


refreshPositions() 


刷新 sortable 项 目的 缓存 位 置 。 调 用 该 方法 刷新 所 有 sortable 的 已 缓存 的 项 目 位 置 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 refreshPositions 方法 : 


$( ".selector" ).sortable( "refreshPositions" ); 


serialize( options )Returns: String 


序列 化 sortable 的 项 目 id 为 一 个 form/ajax 可 提交 的 字符 串 。 调 用 该 方法 会 产生 一 个 可 被 
追加 到 任何 url 中 的 哈 希 ， 以 便 简单 地 把 一 个 新 的 项 目 顺序 提交 回 服 务 器 。 


默认 情况 下 ， 它 通过 每 个 项 目的 id 进行 工作 ，id 格式 为 "setname_number" ， 且 它 会 产生 一 


个 形 如 "setname []=number&setname[]=number" 的 哈 希 。 


注释 : 如 果 序 列 化 返回 一 个 空 的 字符 串 ， 请 确认 id 属性 包含 一 个 下 划 线 () 。 形 式 必 须 是 
"set_number”。 例 如 ， 一 个 id 属性 为 "foo 1" 、 "foo 5". "foo 2" 的 3 元 素 列 表 将 序 
列 化 为 "foo[]=1&foo[]=5&foo[]=2"”。 您 可 以 使 用 下 划 线 () 、 等 号 (=) 或 连 字符 (-) 来 分 
隔 集合 和 数字 。 例 如 ， "foo=1" 、 "foo-1" 、 "foo i" 所 有 都 序列 化 为 "foo[]=1" 。 


e optionsType: Object 要 自 定义 序列 化 的 选项 。 
o key (默认 值 : 属性 中 分 隔 符 前 面 的 部 分 ) 类 型 : String 描述 : 把 parti BRABE 


的 值 。 

o attribute (默认 值 : "ia" ) 类 型 : String 描述 : 值 要 使 用 的 属性 名 称 。 

o expression (默认 值 : /(.+)[-=_](.+)/ ) 类 型 : RegExp 描述 : 用 于 把 属性 值 分 
隔 为 键 和 值 两 部 分 的 正则 表达 式 。 


Code examples: 
调用 serialize 方法 : 


var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } ); 


toArray( options )Returns: Array 
序列 化 sortable 的 项 目 id 为 一 个 字符 串 的 数组 。 


e optionsType: Object 要 自 定义 序列 化 的 选项 。 
o attribute (default: "ia" )Type: String 值 要 使 用 的 属性 名 称 。 


Code examples: 


调用 toArray 方法 : 


var sortedIDs = $( ".selector" ).sortable( "toArray" ); 


widget()Returns: jQuery 


返回 一 个 包含 sortable 元 素 的 jquery WR. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).sortable( "widget" ); 


Events 


activate( event, ui )Type: sortactivate 


当 使 用 被 连接 列表 时 触发 该 事件 ， 每 个 被 连接 列表 在 拖 搜 开始 时 接收 它 。 


e eventType: Event 
e uiType: Object 


o 


o 


helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 

itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 

offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left }。 
positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left}. 
originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left}. 
senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 activate 回调 的 sortable : 


$( ".selector" ).sortable({ 
activate: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 sortactivate 事件 : 


$( ".selector" ).on( "sortactivate", function( event, ui ) {} ); 


beforeStop( event, ui )Type: sortbeforestop 


当 排 序 停止 时 触发 该 事件 ， 除 了 当 占 位 符 (placeholder) /助手 (helper) 仍然 可 用 时 。 


e eventType: Event 


e uiType: Object 


o 


o 


o 


o 


o 


o 


o 


helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 

itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 

offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } o 
positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left}. 
originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left ) . 
senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 beforeStop 回调 的 sortable : 


$( ".selector" ).sortable({ 
beforeStop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortbeforestop 事件 : 


$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} ); 


change( event, ui )Type: sortchange 


在 排序 期 间 触发 该 事件 ， 除 了 当 DOM 位 置 改变 时 。 


e eventType: Event 
e uiType: Object 
o helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
o itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } 。 
o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left } . 
o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left }. 
o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 change 回调 的 sortable : 


$( ".selector" ).sortable({ 
change: function( event, ui ) (3 


3): 


绑 定 一 个 事件 监听 器 到 sortchange 事件 : 


$( ".selector" ).on( "sortchange", function( event, ui ) {} ); 


create( event, ui )Type: sortcreate 


当 droppable 被 创建 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


使 用 指定 的 create 回调 的 sortable : 


$( ".selector" ).sortable({ 
create: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortcreate 事件 : 


$( ".selector" ).on( "sortcreate", function( event, ui ) {} ); 


deactivate( event, ui )Type: sortdeactivate 


当 排 序 停止 时 触发 该 事件 ， 该 事件 传播 到 所 有 可 能 的 连接 列表 。 


e eventType: Event 


e uiType: Object 


o 


o 


o 


o 


o 


o 


o 


helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 

itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 

offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } o 
positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left ) . 
originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left ) . 
senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 deactivate 回调 的 sortable : 


$( ".selector" ).sortable({ 
deactivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortdeactivate 事件 : 


$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} ); 


out( event, ui )Type: sortout 


当 一 个 sortable 项 目 从 一 个 sortable 列表 移 除 时 触发 该 事件 。 


Note: 当 一 个 sortable 项 目 被 撤销 时 也 会 触发 该 事件 。 


e eventType: Event 


e uiType: Object 


o 


o 


o 


o 


o 


helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 

itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 

offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } 。 
positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left}. 
originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left ) . 


o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 out 回调 的 sortable : 


$( ".selector" ).sortable({ 
out: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortout 事件 : 


$( ".selector" ).on( "sortout", function( event, ui ) {} ); 


over( event, ui )Type: sortover 


当 一 个 sortable 项 目 移动 到 一 个 sortable 列表 时 触发 该 事件 。 


e eventType: Event 
e uiType: Object 
o helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
o itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offsetType: Object 助 手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left }。 
o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left }. 
o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left }. 
o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 over 回调 的 sortable : 


$( ".selector" ).sortable({ 
over: function( event, ui ) {} 


H; 


绑 定 一 个 事件 监听 器 到 sortover 事件 : 


$( ".selector" ).on( "sortover", function( event, ui ) {} ); 


receive( event, ui )Type: sortreceive 


当 来 自 一 个 连接 的 sortable 列表 的 一 个 项 目 被 放置 到 另 一 个 列表 时 触发 该 事件 。 后 者 是 事件 
目标 。 


e eventType: Event 
e uiType: Object 
o helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
o itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } 。 
o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left } . 
o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left } . 
o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 receive 回调 的 sortable : 


$( ".selector" ).sortable({ 
receive: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 sortreceive 事件 : 


$( ".selector" ).on( "sortreceive", function( event, ui ) {} ); 


remove( event, ui )Type: sortremove 


当 来 自 一 个 连接 的 sortable 列表 的 一 个 项 目 被 放置 到 另 一 个 列表 时 触发 该 事件 。 前 者 是 事件 
目标 。 


e eventType: Event 
e uiType: Object 
o helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
o itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } 。 
o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left ) . 
o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left } . 
o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 remove 回调 的 sortable : 


$( ".selector" ).sortable({ 
remove: function( event, ui ) {} 


H; 


绑 定 一 个 事件 监听 器 到 sortremove 事件 : 


$( ".selector" ).on( "sortremove", function( event, ui ) {} ); 


sort( event, ui )Type: sort 


在 排序 期 间 触发 该 事件 。 


e eventType: Event 


e uiType: Object 


o 


o 


o 


o 


o 


o 


o 


helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 

itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 

offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } o 
positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left}. 
originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left ) . 
senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 sort 回调 的 sortable : 


$( ".selector" ).sortable({ 
sort: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sort 事件 : 


$( ".selector" ).on( "sort", function( event, ui ) {} ); 


start( event, ui )Type: sortstart 


当 排 序 开 始 时 触发 该 事件 。 


e eventType: Event 


e uiType: Object 


o 


o 


o 


helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } 。 


o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left ) . 

o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left } . 

o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


o 


Code examples: 


使 用 指定 的 start 回调 的 sortable : 


$( ".selector" ).sortable({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortstart 事件 : 


$( ".selector" ).on( "sortstart", function( event, ui ) {} ); 


stop( event, ui )Type: sortstop 


当 排 序 停止 时 触发 该 事件 。 


e eventType: Event 
e uiType: Object 
o helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
o itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offsetType: Object 助 手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left }。 
o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left } . 
o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left } . 
o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 stop 回调 的 sortable : 


$( ".selector" ).sortable({ 
stop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortstop 事件 : 


$( ".selector" ).on( "sortstop", function( event, ui ) {} ); 


update( event, ui )Type: sortupdate 


当 用 户 停止 排序 且 DOM 位 置 改 变 时 触发 该 事件 。 


e eventType: Event 
e uiType: Object 
o helperType: jQueryjQuery 对 象 ， 表 示 被 排序 的 助手 (helper) 。 
o itemType: jQueryjQuery 对 象 ， 表 示 当 前 被 拖 搜 的 元 素 。 
o offsetType: Object 助手 (helper) 的 当前 的 绝对 位 置 ， 表 示 为 { top, left } 。 
o positionType: Object 助手 (helper) 的 当前 位 置 ， 表 示 为 { top, left}. 
o originalPositionType: Object 元 素 的 原始 位 置 ， 表 示 为 { top, left }. 
o senderType: jQuery 如 果 从 一 个 sortable 移动 到 另 一 个 sortable， 项 目 来 自 的 那个 
o placeholderType: jQueryjQuery 对 象 ， 表 示 被 作为 占 位 符 使 用 的 元 素 。 


Code examples: 


使 用 指定 的 update 回调 的 sortable : 


$( ".selector" ).sortable({ 
update: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 sortupdate 事件 : 


$( ".selector" ).on( "sortupdate", function( event, ui ) {} ); 


Example: 


A simple jQuery UI Sortable. 


<!doctype html» 
«html lang="en"> 
«head» 
«meta charset="utf-8"> 
<title>sortable demo</title> 
<link rel="stylesheet" href="http://code. jquery.com/ui/1.10.3/themes/smoothness/jquery- 
«script src="http://code. jquery.com/jquery-1.9.1.js"></script> 
«script src="http://code. jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="sortable"> 
<li>Item 1«/li» 
<li>Item 2«/1li» 
<li>Item 3«/li» 
<li>Item 4«/li» 
<li>Item 5</1li> 
</ul> 


<script>$("#sortable").sortable();</script> 


</body> 
</html> 
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Method Overrides 


jQuery Ul 重 载 了 几 个 内 置 的 jQuery 方法 ， 以 提供 额外 的 功能 。 当 使 用 这 些 重 载 时 ， 确 保 加 
载 jQuery Ul 是 很 重要 的 。 如 果 jQuery Ul 未 加 载 ， 方 法 依然 存在 ， 但 预期 的 功能 将 不 可 用 ， 
这 会 导致 难以 追踪 的 错误 。 


Also in: Effects | Effects Core 


.addClass() 


当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 添 加 指定 的 Class. 


Also in: Methods | UI Core 


.focus() 
异步 聚焦 到 一 个 元 素 。 


Also in: Effects | Effects Core | Methods 


.hide() 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


Also in: Methods | Utilities 


.position() 

相对 另 一 个 元 素 定 位 一 个 元 素 。 

Also in: Effects | Effects Core 

.removeClass() 

当 动 画 样 式 改变 时 ， 为 匹配 的 元 素 集 合 内 的 每 个 元 素 移 除 指定 的 Class. 


Also in: Effects | Effects Core | Methods 


.Show() 


使 用 自 定 义 效果 来 显示 匹配 的 元 素 。 


Also in: Effects | Effects Core | Methods 


.toggle() 
使 用 自 定义 效果 来 显示 或 隐藏 匹配 的 元 素 。 


Also in: Effects | Effects Core 


.toggleClass() 


当 动 画 样式 改变 时 ， 根 据 Class 是 否 存 在 以 及 switch 参数 的 值 ， 为 匹配 的 元 素 集合 内 的 每 个 
元 素 添 加 或 移 除 一 个 或 多 个 Class. 


.focus() 


Categories: Method Overrides | Methods | UI Core 


.focus( delay [, callback ] )Returns: jQuery 
Description: 异步 聚焦 到 一 个 元 素 。 


ə .focus( delay [, callback ] ) 


o delayType: Integer 聚 焦 前 等 待 的 毫秒 数 。 
o callbackType: Function() 元 素 被 聚焦 后 要 调用 的 函数 。 


该 插件 扩展 自 jQuery ABBY .focus() Aik. 如 果 jQuery Ul 未 加 载 ， 调 用 .focus() 方法 
不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 的 行为 。 


.position() 


Categories: Method Overrides | Methods | Utilities 


.position( options )Returns: jQueryversion added: 
1.8 


Description: 相对 另 一 个 元 素 定 位 一 个 元 素 。 


e .position( options ) 


o optionsType: Object 
=m my (默认 值 "center" ) 类 型 String 描述 : 定义 被 定位 元 素 上 对 准 目标 元 
素 的 位 置 : "horizontal vertical" 对 齐 方式 。 一 个 单一 的 值 ， 上 比如 "right" 将 规范 
为 "right center", "top" 将 规范 为 "center top" (下 面 的 CSS 公约 ) 。 可 接受 的 
水 平 值 : "left"、"center"、"right"。 可 接受 的 垂直 
值 : "top"、"center"、"bottom"。 例 如 ，"left top" 或 "center center"。 每 个 纬度 
也 可 以 包含 偏 移 ， 以 像素 计 或 以 百分比 计 ， 例 如 "right+10 top-25%"。 百 分 比 偏 
移 是 相对 于 被 定位 的 元 素 。 
w at (默认 值 : "center" ) 类 型 String 描述 : 定义 目标 元 素 上 对 准 被 定位 元 素 
的 位 置 : "horizontal vertical" 对 齐 方式 。 如 需 了 解 更 多 细节 请 查看 my 选项 上 的 
可 能 值 。 百 分 比 偏 移 是 相对 于 目标 元 素 。 
= of (默认 值 : null) 类 型 Selector 或 Element 或 jQuery 或 Event 描述 : 要 
定位 的 元 素 。 如 果 您 提供 一 个 选择 器 (Selector) 或 jQuery 对 象 ， 将 使 用 第 一 
个 匹配 元 素 。 如 果 您 提供 一 个 事件 (Event) 对 象 ， 将 使 用 pageX 和 pageY 属 
性 ， 例 如 "#top-menu". 
= collision (默认 值 : "flip" ) 类 型 : String 描述 : 当 被 定位 元 素 在 某 些 方向 上 
洽 出 窗口 ， 则 移动 它 到 另 一 个 位 置 。 与 my 和 at 选项 相似 ， 该 选项 会 接受 一 个 
单一 的 值 或 一 对 horizontal/vertical 值 。 例 如 : "flip", "fit", "fit flip", "fit none". 
= "flip" : 翻转 元 素 到 目标 的 相对 一 边 ， 再 次 运行 collision 检测 一 通 查 看 元 素 
是 否 适 合 。 无 论 哪 一 边 人 允许 更 多 的 元 素 可 见 ， 则 使 用 那 一 边 。 
"fit" : 把 元 素 从 窗口 的 边缘 移 开 。 
"flipfit" : 首先 应 用 flip 逻辑 ， 把 元 素 放 置 在 允许 更 多 元 素 可 见 的 那 一 边 。 然 
后 应 用 fitz, MRAR ZTR No 
= "none" : 不 应 用 任何 collision 检测 。 
= using (默认 值 : null) 类 型 : Function() 描述 : 当 指定 了 该 选项 ， 实 际 属 性 
设置 则 委托 给 该 回调 。 接 受 两 个 参数 : 第 一 个 是 位 置 tpp 和 left 值 的 哈 希 ， 可 被 
转发 到 .css() 或 .animate() ; 第 二 个 提供 了 关于 两 个 元 素 的 位 置 和 尺寸 的 反馈 ， 


同时 也 计算 它们 的 相对 位 置 。target 和 element 都 有 下 列 属性 : element, left, 
top、width、height。 另 外， 还 有 horizontal, vertical 和 important， 提 供 了 十 二 
个 可 能 的 方向 ， 如 { horizontal: "center", vertical: "left", important: "horizontal" 
}o 

within (默认 值 : window ) 类 型 : Selector 或 Element 或 jQuery 描述 : 元 素 
定位 为 within， 会 影响 collision 检测 。 如 果 您 提供 了 一 个 选择 器 (Selector) 或 
jQuery 对 象 ， 则 使 用 第 一 个 匹配 的 元 素 。 


jQuery UI .position() 方法 允许 您 相对 窗 体 (window) 、 文 档 、 另 一 个 元 素 或 指针 
(cursor) /鼠标 (mouse) 来 定位 一 个 元 素 ， 无 需 考 虑 相对 父 元 素 的 仿 移 (offset) 。 


注释 : jQuery UI 不 支持 定位 隐藏 元 素 。 
这 是 一 个 独立 的 jQuery 插件 ， 且 对 其 他 jQuery Ul 组 件 没有 依赖 关系 。 


该 插件 扩展 自 jQuery AEH .position() 方法 。 如 果 jQuery UI 未 加 载 ， 调 用 .position() A 
法 不 会 直接 失败 ， 因 为 该 方法 在 jQuery 中 存在 。 但 是 不 会 发 生 预 期 的 行为 。 


Example: 


一 个 简单 的 jQuery UI €f (Position) 实例 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>position demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
<style> 
.positionDiv { 
position: absolute; 
width: 75px; 
height: 75px; 
background: green; 


</style> 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="targetElement"> 
«div class-"positionDiv" id="positioni"></div> 
«div class-"positionDiv" id="position2"></div> 
«div class-"positionDiv" id="position3"></div> 
«div class-"positionDiv" id="position4"></div> 
«/div» 


«script» 

$( "#positioni" ).position({ 
my: "center", 
at: "center", 
of: "#targetElement" 


3); 


$( "#position2" ).position({ 
my: "left top", 
at: "left top", 
of: "#targetElement" 


3); 


$( "#position3" ).position({ 
my: "right center", 
at: "right bottom", 
of: "#targetElement" 


3); 


$( document ).mousemove(function( event ) ( 
$( "#position4" ).position({ 
my: "left+3 bottom-3", 
of: event, 
collision: "fit" 
H); 
3); 


</script> 


</body> 
</html> 
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Methods 


虽然 jQuery UI 主 要 包含 的 是 widgets, interactions, h 和 effects, 也 添加 了 几 个 简单 方便 的 方 
法 。 


Also in: UI Core 


.disableSelection() 


禁用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 


Also in: Effects | Effects Core 


.effect() 


对 一 个 元 素 应 用 动画 特效 。 


Also in: U! Core 


.enableSelection() 


启用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 


Also in: Method Overrides | UI Core 


focus() 
异步 聚焦 到 一 个 元 素 。 


Also in: Effects | Effects Core | Method Overrides 


.hide() 


使 用 自 定义 效果 来 隐藏 匹配 的 元 素 。 


Also in: Method Overrides | Utilities 


.position() 


相对 另 一 个 元 素 定 位 一 个 元 素 。 
Also in: U! Core 


.removeUniqueld() 


为 匹配 的 元 素 集 合 移 除 由 .uniqueld() 设置 的 Id. 


Also in: U! Core 


.scrollParent() 

获取 最 近 的 可 滚动 的 祖先 。 

Also in: Effects | Effects Core | Method Overrides 
.Show() 


使 用 自 定义 效果 来 显示 匹配 的 元 素 。 


Also in: Effects | Effects Core | Method Overrides 


.toggle() 


使 用 自 定 义 效果 来 显示 或 隐藏 匹配 的 元 素 。 
Also in: UI Core 

.uniqueld() 

为 匹配 的 元 素 集 合生 成 并 申请 一 个 唯一 的 Id, 
Also in: U! Core 

.zindex() 


为 元 素 获 取 z-index. 


.disableSelection() 


Categories: Methods | UI Core 


.disableSelection()Returns: jQuery 
Description: 禁用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 


e version added: 1.6, deprecated: 1.9.disableSelection() 
o 该 方法 不 接受 任何 参数 。 
禁用 的 文本 选择 是 有 害 的 ， 不 建议 使 用 。 


.enableSelection() 


Categories: Methods | UI Core 


.enableSelection()Returns: jQuery 
Description: 启用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 


e version added: 1.6, deprecated: 1.9.enableSelection() 
o 该 方法 不 接受 任何 参数 。 


.enableselection() 方法 可 用 于 启用 通过 .disableselection() 禁用 的 文本 选择 。 


.removeUniqueld() 


Categories: Methods | UI Core 


removeUniqueld()Returns: jQuery 
Description: 为 匹配 的 元 素 集合 移 除 由 .uniquerd() 设置 的 Id, 


e version added: 1.9.removeUniqueld() 
o 该 方法 不 接受 任何 参数 。 


.removeUniqueId() Te ER EH .uniqueId() 设置 的 id。 在 未 使 用 .uniqueId() 设置 id 的 元 素 上 
调用 .removeuniquerd() 则 无 影响 ， 即 使 该 元 素 有 一 个 ido 


.scrollParent() 


Categories: Methods | UI Core 


.scrollParent()Returns: jQuery 
Description: 获取 最 近 的 可 滚动 的 祖先 。 
e .scrollParent() 


o 该 方法 不 接受 任何 参数 。 


该 方法 查找 最 近 的 可 滚动 的 祖先 。 换 名 话说 ， .scrollParent() 查找 当前 所 选 元 素 在 其 内 滚动 
的 元 素 。 


注意 : 该 方法 只 在 包含 一 个 元 素 的 jQuery 对 象 上 工作 。 


.uniqueld() 


Categories: Methods | UI Core 


.uniqueld()Returns: jQuery 
Description: 为 匹配 的 元 素 集合 生成 并 申请 一 个 唯一 的 Id。 


e version added: 1.9.uniqueld() 
o 该 方法 不 接受 任何 参数 。 


许多 小 部 件 需 要 元 素 生 成 唯一 的 ido .uniquerd() 会 检查 元 素 是 否 有 id， 如 果 元 素 没 有 id， 
它 将 生成 一 个 id， 并 设置 为 该 元 素 的 id。 在 未 检查 元 素 是 否 具 有 id 就 调用 .uniqueId() 是 安 
全 的 。 当 小 部 件 使 用 后 需要 清除 ， 如 果 id 是 通过 .uniqueId() 添加 的 ， .removeUniqueId() 
方法 将 从 元 素 上 移 除 id， 如 果 id 不 是 通过 .uniqueld() 添加 的 ， 则 无 影 

"o .removeUniqueId() 之 所 以 能 区 分 id， 是 因为 .uniquerd() 生成 的 id 带 有 前 级 "ui-id-"。 


.zindex() 


Categories: Methods | UI Core 


e .zindex() 
o .zlndex() 
e .zlndex( zindex ) 
o .zlndex( zindex ) 


.zindex()Returns: jQuery 
Description: 为 元 素 获 取 z-index. 
e .zindex() 


o 该 方法 不 接受 任何 参数 。 


.zIndex() 方法 在 查找 一 个 元 素 的 z-index 时 非常 有 有 用， 忽略 z-index 是 否 是 直接 设置 在 元 素 
上 还 是 设置 在 祖先 元 素 上 。 为 了 确定 z-index， 该 方法 会 在 指定 的 元 素 上 开始 ， 且 会 治 

DOM 查找 ， 直 到 找到 一 个 带 有 z-index 的 已 定位 的 元 素 。 如 果 未 找到 这 样 的 元 素 ， 该 方法 将 
返回 一 个 e 值 。 


该 方法 假设 带 有 谋 套 z-index 的 元 素 不 带 有 一 个 e 值 的 z-index。 例 如 ， 给 出 下 面 的 DOM, 
内 部 元 素 将 被 当成 不 带 有 z-index， 因 为 在 Internet Explorer 中 无 法 区 分 一 个 o 显 式 值 和 无 
值 。 


«div style-"z-index: -10;"> 
«div style="z-index: 0;"></div> 
«/div» 


.zindex( zindex )Returns: integer 
Description: 为 元 素 设置 z-index. 


e .zindex( zindex ) 
o zindexType: Integer 要 设置 的 z-index。 


这 相当 于 .CSS( "zIndex", zIndex ) o 


Selectors 


:data() Selector 

选择 数据 已 存储 在 指定 的 键 下 的 元 素 。 
Also in: U! Core 

‘focusable Selector 
选择 可 被 聚焦 的 元 素 。 

Also in: U! Core 

‘tabbable Selector 


选择 用 户 可 通过 tab 键 聚焦 的 元 素 。 


:data() Selector 


Categories: Selectors | Ul Core 


Description: 选择 数据 已 存储 在 指定 的 键 下 的 元 素 。 


e jQuery( ":data(key)" ) 
key: 数据 的 键 。 


表达 式 $( "div:data(foo)") 匹配 一 个 通过 .data( "foo", value ) 存储 数据 的 
&lt;div&gt; o 


Example: 


选择 带 有 数据 的 元 素 ， 改 变 它 们 的 背景 颜色 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>data demo</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
<style> 
div { 
width: 100px; 
height: 100px; 
border: 1px solid #000; 
float: left; 


} 
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 


<script> 
$( "£one" ).data( "color", "blue" ); 
$( "£three" ).data( "color", "green" ); 


$( ":data(color)" ).each(function() { 
var element - $( this ); 
element.css( "backgroundColor", element.data( "color" ) ); 


3); 


</script> 


</body> 
</html> 
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:focusable Selector 


Categories: Selectors | UI Core 


Description: 选择 可 被 聚焦 的 元 素 。 


e jQuery( ":focusable" ) 


一 些 元 素 本 身 是 可 聚焦 的 (focusable) ， 而 另 一 些 元 素 需 要 显 式 设置 tab 索引 。 以 上 两 种 情 
况 ， 为 了 可 聚焦 (focusable) ， 元 素 都 必须 是 可 见 的 。 

下 面 类 型 的 元 素 如 果 未 被 禁用 ， 则 是 可 聚焦 的 

(focusable) : input, select, textarea. button 和 object 。 锚 如 果 带 有 href 或 
tabindex 属性 ， 则 是 可 聚焦 的 (focusable) 。 area 元 素 如 果 在 一 个 已 命名 的 map A, H 
带 有 href 属性 ， 且 有 一 个 可 见 的 图 像 使 用 了 该 map， 则 是 可 聚焦 的 (focusable) 。 所 有 其 
他 完全 基于 tabindex 属性 和 可 见 度 的 元 素 是 可 聚焦 的 (focusable) 。 


注释 : 带 有 负 的 tab 索引 的 元 素 是 :focusable , 不 是 [:tabbable](/tabbable-selector/) 。 


Example: 


选择 可 聚焦 的 元 素 ， 且 用 一 个 红色 边框 突出 显示 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>focusable demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
<style> 
input, a, p { 
border: 1px solid #000; 
} 
div { 
padding: 5px; 


</style> 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div><input value="text input"></div> 

<div><a>anchor without href</a></div> 

<div><a href="#">anchor with href</a></div> 
<div><p>paragraph without tabindex</p></div> 

<div><p tabindex="1">paragraph with tabindex</p></div> 


<script> 
$( ":focusable" ).css( "border-color", "red" ); 
</script> 


</body> 
</html> 
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:tabbable Selector 


Categories: Selectors | UI Core 


Description: 选择 用 户 可 通过 tab 键 聚焦 的 元 素 。 


e jQuery( ":tabbable" ) 


一 些 元 素 本 身 是 可 通过 tab 键 聚焦 的 (tabbable) ， 而 另 一 些 元 素 需 要 显 式 设置 一 个 正 的 tab 
索引 。 以 上 两 种 情况 ， 为 了 可 通过 tab 键 聚焦 (tabbable) ， 元 素 都 必须 是 可 见 的 。 


下 面 类 型 的 元 素 如 果 不 带 有 负 的 tab 索引 且 未 被 禁用 ， 则 是 可 通过 tab 键 聚焦 的 

(tabbable) : input. select, textarea. button 和 object 。 锚 如 果 带 有 href 或 
正 的 tabindex 属性 ， 则 是 可 通过 tab 键 聚焦 的 (tabbable) 。 area 元 素 如 果 在 一 个 已 命名 
的 map A, EL nrer 属性 ， 且 有 一 个 可 见 的 图 像 使 用 了 该 map， 则 是 可 通过 tab 键 聚焦 
的 (tabbable) 。 所 有 其 他 完全 基于 tabindex 属性 和 可 见 度 的 元 素 是 可 通过 tab 键 聚焦 的 
(tabbable) 。 


注释 : 带 有 负 的 tab 索引 的 元 素 是 :focusable ,不 是 :tabbable o 


Example: 


选择 可 通过 tab 键 聚 焦 的 元 素 ， 且 用 一 个 红色 边框 突出 显示 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>tabbable demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
<style> 
input { 
border: 1px solid #000; 
} 
div { 
padding: 5px; 


</style> 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div><input value="no tabindex"></div> 
<div><input tabindex="5" value="positive tabindex"></div> 
<div><input tabindex="-1" value="negative tabindex"></div> 


<script> 
$( ":tabbable" ).css( "border-color", "red" ); 
</script> 


</body> 
</html> 
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Theming 
jQuery UI 包括 一 个 强大 的 CSS 框架 ， 用 于 创建 自 定义 的 jQuery 小 部 件 。 该 框架 包括 涵盖 广 
泛 的 公共 用 户 界 面 需 求 的 Class， 并 且 可 以 使 用 jQuery UI ThemeRoller 进行 操纵 。 通 过 使 用 


jQuery UI CSS 框架 创建 您 自己 的 UI 组件， 您 应 采用 共享 标记 公约 ， 便 于 插件 社区 的 代码 集 
成 。 您 可 以 查看 jQuery Ul 主题 了 解 更 多 详情 。 


CSS Framework 


jQuery UI 使 用 的 允许 组 件 主题 化 的 Class 名 称 列表 。 


Icons 


jQuery UI 提供 的 图 标 列 表 。 


Stacking Elements 


一 种 处 理 z-index FE ATTRA. 


CSS 框架 (CSS Framework) 


下 面 是 jQuery UI 使 用 的 Class 名 称 列表 。 这 些 Class 用 来 创建 跨 应 用 程序 的 视觉 一 致 性 ， 且 
允许 组 件 通过 jQuery Ul ThemeRoller 进行 主题 化 。 下 面 的 类 根据 样式 是 否 是 固定 的 结 
构 化 的 ， 或 者 是 否 是 可 主题 化 的 〈 颜 色 、 字 体 、 背 景 等 ) ， 分 别 定 义 在 ui.core.css 和 
ui.theme.css 两 个 文件 中 。 


布局 助手 


e .ui-helper-hidden : 对 元 素 应 用 display: none o 

e .ui-helper-hidden-accessible : 对 元 素 应 用 访问 隐藏 (通过 页 面 绝 对 定位 ) o 

e .ui-helper-reset : Ul 元 素 的 基本 样式 重 置 。 重 置 的 元 素 比 
如 : padding, margin, text-decoration 、list-style， 等 等 。 

e .ui-helper-clearfix : 对 父 元 素 应 用 浮动 包装 属性 。 

e .ui-helper-zfix : 对 &lt;iframe&gt; RAH iframe "fix" CSS, 

e .ui-front : 应 用 z-index 来 管理 屏幕 上 多 个 小 部 件 的 堆 琶 ， 如 需 了 解 更 多 详情 ， 请 查看 
HSJ (Stacking Elements) 页 面 。 


小 部 件 容器 


e .ui-widget : 对 所 有 小 部 件 的 外 部 容器 应 用 的 Class。 对 小 部 件 应 用 字体 和 字体 尺寸， 
同时 也 对 自 表 单元 素 应 用 相同 的 字体 和 1em 的 字体 尺寸 ， 以 应 对 Windows 浏览 器 中 的 
继承 问题 。 

*  .ui-widget-header : 对 标题 容器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文本 、 链接 、 图 标 
应 用 标题 容器 样式 。 

* .ui-widget-content : 对 内 容 容器 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文本 、 链接 、 图 标 
应 用 内 容 容 器 样式 。 (可 应 用 到 标题 的 父 元 素 或 者 同 级 元 素 ) 


交互 状态 


* .ui-state-default : 对 可 点 击 按钮 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文本 、 链 
接 、 图 标 应 用 "clickable default" 容器 样式 。 

e .ui-state-hover : 当 妃 标 甚 浮 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-focus : 当 键 胡 聚 焦 在 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 及 其 子 元 素 
的 文本 、 链 接 、 图 标 应 用 "clickable hover" 容器 样式 。 

e .ui-state-active : 当 鼠 标点 击 可 点 击 按钮 元 素 上 时 应 用 的 Class。 对 元 素 及 其 子 元 素 的 
文本 、 链 接 、 图 标 应 用 "clickable active" 容器 样式 。 


交互 提示 Cues 


e .ui-state-highlight : 对 高 完 或 者 选中 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文本 、 
链接 、 图 标 应 用 "highlight" 容器 样式 。 

e .ui-state-error : 对 错误 消息 容器 元 素 应 用 的 Class。 对 元 素 及 其 子 元 素 的 文本 、 链 
接 、 图 标 应 用 "error" 容器 样式 。 

e .ui-state-error-text : 对 只 有 无 背景 的 错误 文本 颜色 应 用 的 Class。 可 用 于 表单 标签 ， 
也 可 以 对 子 图 标 应 用 错误 图 标 颜色 。 

e .ui-state-disabled : 对 禁用 的 UI 元 素 应 用 一 个 暗淡 的 不 透明 度 。 意味 着 对 一 个 已 经 定 
义 样式 的 元 素 添 加 额外 的 样式 。 

e .ui-priority-primary : 对 第 一 优先 权 的 按钮 应 用 的 Class。 应 用 粗 体 文本 。 

e .ui-priority-secondary : 对 第 二 优先 权 的 按钮 应 用 的 Class。 应 用 正常 粗细 的 文本 ， 对 
元 素 应 用 轻微 的 透明 度 。 


图 标 


状态 和 图 像 
e .ui-icon : 对 图 标 元 素 应 用 的 基本 Class。 设 置 尺 寸 为 16px 方块 ， 隐 藏 内 部 文本 ， 对 
"content" 状态 的 精灵 图 像 设置 背景 图 像 。 注 意 : .wi-icon class 将 根据 它 的 父 容器 得 到 
一 个 不 同 的 精灵 背景 图 像 。 例 如 ， ui-state-default 容器 内 的 ui-icon 元 素 将 根据 
ui-state-default 的 图 标 颜色 进行 着 色 。 


图 标 类 型 


在 声明 .ui-icon class 之 后 ， 接 着 您 可 以 声明 一 个 秒 速 图 标 类 型 的 class。 通 常情 况 下 ， 
标 Class 遵循 语法 .Ui-icon-[icon type}-{icon sub description}-{direction} o 


例如 ， 一 个 指向 右 侧 的 三 角形 图 标 ， 如 下 所 示 : .Ui-icon-triangle-1-e 


jQuery UI 的 ThemeRoller 在 它 的 预览 一 栏 中 提供 了 全 套 的 CSS HERR. ERU RETE FJ 
标 上 可 查看 class 名 称 。 


其 他 视觉 效果 


圆 角 半径 助手 


e .ui-corner-t1 : 对 元 素 的 左上 角 应 用 圆 角 半 径 。 

e .ui-corner-tr : 对 元 素 的 右上 角 应 用 圆 角 半 径 。 

e .ui-corner-bl : 对 元 素 的 左下 角 应 用 圆 角 半 径 。 

e .ui-corner-br : 对 元 素 的 右 下 角 应 用 圆 角 半 径 。 

e .ui-corner-top : 对 元 素 上 边 的 左右 角 应 用 圆 角 半径 。 

e .ui-corner-bottom : 对 元 素 下 边 的 左右 角 应 用 圆 角 半径 。 


* .ui-corner-right : 对 元 素 右 边 的 上 下 角 应 用 圆 角 半径 。 
e .ui-corner-left : 对 元 素 左 边 的 上 下 角 应 用 圆 角 半径 。 
e .ui-corner-all : 对 元 素 的 所 有 四 个 角 应 用 圆 角 半 径 。 


fim & 阴影 


e  .ui-widget-overlay : 对 覆盖 屏幕 点 用 100% 宽度 和 高 度 ， 同时 设置 背景 颜色 /纹理 和 屏 
幕 不 透明 度 。 

e  .ui-widget-shadow : 对 覆盖 点 用 的 Class， 设 置 了 不 透明 度 、 上 偏 移 / 左 偏 移 ， 以 及 阴影 
的 "厚度 "。 厚 度 是 通过 对 阴影 所 有 边 设 置 内 边 距 (padding) 进行 应 用 的 。 偏 移 是 通过 设 
ELIA (margin) 和 左 外 边 距 (margin) 进行 应 用 的 (可 以 是 正 数 ， 也 可 以 是 负 
数 ) 。 


Icons 


jQuery UI 提供 了 大 量 可 以 通过 对 元 素 应 用 Class 名 称 来 使 用 的 图 标 (Icons) > Class 名 称 大 
体 上 遵循 语法 .Ui-icon-{icon type}-{icon sub description}-{direction} o 例如 ， FIR X 


一 个 向 北 的 厚 箭头 的 图 标 : 
<span class="ui-icon ui-icon-arrowthick-1-n"></span> 


图 标 也 集成 到 一 些 jQuery UI 的 小 部 件 ， 比 如 accordion, button, menu. 


下 面 是 jQuery Ul 提供 的 图 标的 完整 列表 : 


Stacking Elements 


堆 生 的 或 者 移动 到 其 他 元 素 前 面 的 小 部 件 (Widgets) 当 放 置 到 现实 世界 的 页 面 中 时 经 常 面临 
pkey, Je Rat MIDAS TE ATCA z-index 或 者 父 元 素来 避免 页 面 上 的 冲突 。 但 是 ， 
jQuery UI 需要 一 ee z-index 值 的 通用 的 解决 方案 。 这 是 通过 ui-front 
class 来 完成 的 ， 通 常 还 伴随 着 堆 又 组 件 上 的 appendTo 选项 。 


link The ui-front class 


ui-front Class 是 非常 基础 的 。 它 只 是 在 元 素 上 设置 了 一 个 静态 的 z-index fA. (BZ, 
class 的 存在 是 用 来 表明 堆 到 元素 要 追加 到 哪里 。 这 人 允许 我 们 利用 赂 套 层 内 容 ， 生 成 一 个 在 大 
多 数 情 况 下 都 能 使 用 的 默认 的 DOM 位 置 。 


注释 : 当 使 用 ui-front 时 ， Tp 须 设 置 position 为 relative 、 absolute 或 fixed , 
以 便 应 用 z-index o 


link #ES2RR (stacking technique) 


追加 堆 受 元 素 到 页 面 的 任何 小 部 件 都 必须 使 用 ui-front class， 且 在 大 多 数 情 况 下 ， 应 该 有 
二 小 appendTo 选项 。 ME a TRASI FHA : 


e 如 果 一 个 值 设置 为 appendro 选项 ， 则 追加 堆 受 元 素 到 指定 的 元 素 。 

e 如 果 appendTo 选项 被 设置 为 null (默认 ) ， 则 小 部 件 应 从 相关 的 元 素 开 始 通 历 
DOM。 例 如 ， 当 自动 完成 (autocomplete) 菜单 被 追加 到 DOM， 通 历 则 从 相关 的 input 
元 素 开 始 。 

o 如 果 找 到 一 个 带 有 ui-front class 的 元 素 ， 则 追加 到 该 元 素 。 
o 如 果 没 有 找到 一 个 带 有 ui-front class 的 元 素 ， 则 追加 到 主体 (body) 。 

e HEACH position 必须 设置 为 relative, absolute 或 fixed ， 以 便 应 用 来 自 
ui-front class 的 z-index 。 使 用 .position() 将 自动 设置 position o 


Ul Core 


FA jquery.ui.core.js 提供 的 功能 。 
Also in: Selectors 
:data() Selector 


选择 数据 已 存储 在 指定 的 键 下 的 元 素 。 


Also in: Methods 


.disableSelection() 


茶 用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 


Also in: Methods 


.enableSelection() 


启用 选择 匹配 的 元 素 集 合 内 的 文本 内 容 。 


Also in: Method Overrides | Methods 


focus() 
异步 聚焦 到 一 个 元 素 。 


Also in: Selectors 


:focusable Selector 


选择 可 被 聚焦 的 元 素 。 


jQuery.ui.keyCode 


一 个 相对 于 数字 值 的 关键 代码 描述 的 映射 。 


Also in: Methods 


.removeUniqueld() 

为 匹配 的 元 素 集合 移 除 由 .uniqueld() 设置 的 Id, 
Also in: Methods 

.ScrollParent() 

获取 最 近 的 可 滚动 的 祖先 。 

Also in: Selectors 

‘tabbable Selector 

选择 用 户 可 通过 tab 键 聚 焦 的 元 素 。 

Also in: Methods 

.uniqueld() 

为 匹配 的 元 素 集 合生 成 并 申请 一 个 唯一 的 Id, 
Also in: Methods 

.zIndex() 


为 元 素 获 取 z-index。 


Utilities 

Easings 

Easing 本 数 指定 动画 在 不 同 点 上 的 行进 速度 。 

Also in: Widgets 

Widget Factory 

使 用 与 所 有 jQuery UI 小 部 件 相同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 
Also in: Widgets 

Widget Plugin Bridge 


jQuery.widget.bridge() 方法 是 jQuery 部 件 库 (Widget Factory) 的 一 部 分 。 它 扮演 着 由 
$.widget() 创建 的 对 象 和 jQuery API 之 间 的 中 介 。 


Also in: Interactions 

Mouse Interaction 
基本 交互 层 。 

Also in: Method Overrides | Methods 
.position() 


相对 另 一 个 元 素 定位 一 个 元 素 。 


Widget Factory 


Categories: Utilities | Widgets 


e jQuery.widget( name [, base ], prototype ) 
o jQuery.widget( name [, base ], prototype ) 
e jQuery.Widget 


jQuery.widget( name [, base ], prototype ) 
Description: 使 用 与 所 有 jQuery Ul 小 部 件 相同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 


。 jQuery.widget( name [, base ], prototype ) 


o nameType: String 要 创建 的 小 部 件 名 称 ， 包 括 命名 空间 。 

o baseType: Function() 要 继承 的 基础 小 部 件 。 必 须 是 一 个 可 以 使 用 new 关键 词 实例 
化 的 构造 男 数 。 默 认为 jQuery.widget o 

o prototypeType: PlainObject 要 作为 小 部 件 原 型 使 用 的 对 象 。 


您 可 以 使 用 s.widget 对 象 作 为 要 继承 的 基础 ， 或 者 可 以 明确 地 从 现 有 的 jQuery Ul 或 第 三 方 
控件 ， 从 头 开 始 创 建新 的 小 部 件 。 定 义 一 个 带 有 相同 名 称 的 小 部 件 来 继承 基础 部 件 ， 其 至 允 
许 您 适当 地 扩展 小 部 件 。 


jQuery Ul 中 包含 许多 保持 状态 的 小 部 件 ， 因 此 比 典型 的 jQuery 插件 稍 有 不 同 的 使 用 模式 。 
所 有 的 jQuery UI 小 部 件 使 用 相同 的 模式 ， 这 是 由 部 件 库 (Widget Factory) 定义 的 。 所 以 ， 
只 要 您 学 会 使 用 其 中 一 个 ， 您 就 知道 如 何 使 用 其 他 的 小 部 件 (Widget) 。 


寻找 有 关 小 部 件 工厂 的 教程 ? 查看 jQuery 学 习 中 心 的 文章 。 


注意 : 本 章节 使 用 进度 条 部 件 (Progressbar Widget) 演示 实例 ， 但 是 语法 适用 于 每 个 小 部 
件 。 


初始 化 


为 了 跟踪 小 部 件 的 状态 ， 我 们 必须 引入 小 部 件 的 全 生命 周期 。 小 部 件 初始 化 时 生命 周期 开 
始 。 要 初始 化 一 个 小 部 件 ， 我 们 只 需要 简单 地 在 一 个 或 多 个 元 素 上 调用 插件 。 


$( "#elem" ).progressbar(); 


这 将 初始 化 jQuery 对 象 中 的 每 个 元 素 。 上 面 实例 中 元 素 id 为 "elem" o 


选项 


由 于 progressbar() 调用 时 不 带 参 数 ， 小 部 件 是 使 用 默认 选项 进行 初始 化 的 。 我 们 可 以 在 初 
始 化 时 传递 一 组 选项 来 覆盖 默认 选项 : 


$( "#elem" ).progressbar({ value: 20 }); 


我 们 可 以 根据 需要 传递 选项 的 个 数 ， 任 何 我 们 未 传递 的 选项 都 使 用 它们 的 默认 值 。 
页 参 


您 可 以 传递 多 个 选项 参数 ， 这 些 参 数 将 会 被 合并 为 一 个 对 象 (类 似 于 
$.extend( true，target，object1，objectN ) ) ) o 这 在 为 所 有 实例 覆盖 一 些 设 XB, 实例 间 共 享 
选项 时 很 有 用 : 


var options = { modal: true, show: "slow" }; 
$( "#dialogi" ).dialog( options ); 
$( "£dialog2" ).dialog( options, { autoOpen: false }); 


所 有 在 初始 化 时 传递 的 选项 都 是 深 拷 贝 的 ， 确 保 后 续 在 不 影响 小 部 件 的 情况 下 修改 对 象 。 数 
组 是 唯一 的 例外 ， 它 们 是 按 原样 引用 的 。 这 个 例外 是 为 了 适当 地 支持 数据 绑 定 ， 其 中 数据 源 
必须 作为 引用 。 


默认 值 保存 在 小 部 件 的 属性 中 ， 因 此 我 们 可 以 履 盖 jQuery UI 设置 的 值 。 例 如 ， 在 下 面 的 设置 
后 ， 所 有 将 来 的 进度 条 实例 将 默认 为 值 80 : 


$.ui.progressbar.prototype.options.value = 80; 


选项 是 小 部 件 状态 的 组 成 部 分 ， 所 以 我 们 也 可 以 在 初始 化 后 设置 选项 。 我 们 会 在 后 续 看 到 
option 方法 。 


方法 


现在 小 部 件 已 经 初始 化 ， 我 们 可 以 查询 它 的 状态 ， 或 者 在 小 部 件 上 执行 动作 。 所 有 初始 化 后 
的 动作 都 是 以 方法 调用 方式 执行 。 为 了 在 小 部 件 上 滑 用 一 个 方法 ， 我 们 向 jQuery 插件 传 北方 
法 的 名 称 。 例 如 ， 在 进度 条 部 件 (Progressbar Widget) 上 调用 valeo 方法 ， 我 们 可 以 使 
H: 


$( "#elem" ).progressbar( "value" ); 


如 果 方 法 接受 参数 ， 我 们 可 以 在 方法 名 称 后 传递 参数 。 例 如 ， 要 传递 参数 40 到 value() 
方法 ， 我 们 可 以 使 用 : 


$( "#elem" ).progressbar( "value", 40 ); 


就 像 jQuery 中 的 其 他 方法 ， 大 多 数 的 小 部 件 方 法 返回 jQuery 对 象 : 


$( "#elem" ) 
.progressbar( "value", 90 ) 
.addClass( "almost-done" ); 


每 个 小 部 件 都 有 自己 的 方法 设置 ， 这 些 设置 是 基于 小 部 件 提供 的 功能 。 但 是 ， 有 一 些 方法 是 
存在 于 所 有 的 小 部 件 上 ， 这 会 在 下 面 进行 详细 讲解 。 
事件 


所 有 的 小 部 件 都 有 与 它们 各 种 行为 相关 的 事件 ， 以 便 在 状态 改变 的 时 候 通知 您 。 对 于 大 多 数 
的 小 部 件 ， 当 事件 被 触发 时 ， 名 称 以 小 部 件 名 称 的 小 宇 字母 形式 作为 前 级。 例如 ， 我 们 可 以 
绑 定 进度 条 的 ”change 事件 ， 该 事件 在 值 改 变 时 触发 。 


$( "#elem" ).bind( "progressbarchange", function() { 
alert( "The value has changed!" ); 
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每 个 事件 都 有 一 个 对 应 的 回调 ， 这 会 作为 选项 。 如 果 需 要 ， 我 们 可 以 抓 住 进度 条 的 change 
回调 ， 而 不 用 绑 定 progressbarchange 事件 。 


$( "#elem" ).progressbar({ 
change: function() { 
alert( "The value has changed!" ); 


} 
3); 
所 有 的 小 部 件 都 有 一 个 change 事件 ， 该 事件 在 实例 化 时 触发 。 


实例 化 


小 部 件 的 实例 是 使 用 带 有 小 部 件 全 称 作 为 键 的 jouery.data() 存储 的 。 因 此 ， 您 可 以 使 用 下 
面 代码 从 元 素 检 索 进 度 条 部 件 (Progressbar Widget) 的 实例 对 象 。 


$( "#elem" ).data( "ui-progressbar" ); 


元 素 是 否 绑 定 了 给 定 小 部 件 ， 可 以 使 用 :data 选择 器 来 检测 。 


$( "#elem" ).is( ":data( 'ui-progressbar' )" ); // true 
$( "#elem" ).is( ":data( 'ui-draggable' )" ); // false 


您 也 可 以 使 用 :data 来 获得 作为 给 定 小 部 件 实例 的 所 有 元 素 的 列表 。 


$( ":data( 'ui-progressbar' )" ); 


属性 


所 有 的 小 部 件 都 有 下 面 的 属性 : 


defaultElement : 当 构 造 小 部 件 实例 未 提供 元 素 时 要 使 用 的 元 素 。 例 如 ， 由 于 进度 条 的 
defaultElement 是 "&lt;div&gt; ", $.ui.progressbar({ value: 50 }) 在 一 个 新 建 的 
&lt;divagt; 上 实例 化 进度 条 小 部 件 实例 。 

document : 其 内 包含 小 部 件 元 素 的 document 。 如 果 需 要 在 框架 内 与 小 部 件 进行 交互 时 
很 有 用 。 

element : 一 个 jQuery 对 象 ， 包 含 用 于 实例 化 小 部 件 的 元 素 。 如 果 您 选择 多 个 元 素 并 调 
用 .mywidget()， 将 为 每 个 元 素 创 建 一 个 单独 的 小 部 件 实例 。 因此 ， 该 属性 总 是 包含 一 
个 元 素 。 

namespace : 小 部 件 原 型 存储 的 全 局 jQuery 对 象 的 位 置 。 例如 ， "ui" 的 namespace 
表示 小 部 件 原 型 存储 在 $.ui 。 

options : 一 个 包含 小 部 件 当前 使 用 选项 的 对 象 。 在 实例 化 时 ， 用 户 提 供 的 任何 选项 将 会 
自动 与 $.myNamespace.myWidget.prototype.options 中 定义 的 默认 值 合并 。 用 户 指 定 的 选 
项 会 覆盖 默认 值 。 

uuid : 一 个 表示 控件 标识 符 的 唯一 整数 。 

version : 小 部 件 的 字符 串 版 本 。 对 于 jQuery Ul 小 部 件 ， 该 属性 会 被 设置 为 小 部 件 使 用 
的 jQuery UI 的 版 本 。 插 件 开 发 者 必须 在 他 们 的 原型 中 明确 设置 该 属性 。 
widgetEventPrefix : 添加 到 小 部 件 事件 名 称 的 前 级 。 例 如 ， 可 拖 搜 小 部 件 (Draggable 
Widget) BY widgetEventPrefix 是 "drag" ， 因 此 当 创 建 一 个 draggable 时 ， 事 件 的 名 
称 是 "dragcreate" 。 默认 情况 下 ， 小 部 件 的 widgetEventPrefix 是 它 的 名 称 。 注 意 : 该 
属性 已 被 度 弃 ， 将 在 以 后 的 版 本 中 非常 。 事 件 名称 将 被 改 为 widgetName:eventName 
(例如 "draggable:create" ) 。 

widgetFullName : 包含 命名 空间 的 小 部 件 全 称 。 对 于 

$.widget( "myNamespace.myWidget", {} ) ， widgetFullName 将 是 
"myNamespace-myWidget" o 

widgetName : 小 部 件 的 名 称 。 对 于 

$.widget( "myNamespace.myWidget", {} ) ， widgetName 将 是 "myWidget" o 

window : 其 内 包含 小 部 件 元 素 的 window 。 如 果 需 要 在 框架 内 与 小 部 件 进 行 交 互 时 很 有 
用 。 


Description: 部 件 库 (Widget Factory) 使 用 的 基础 小 部 件 。 


QuickNav 


Options 


disabled 


e hide 
e Show 
Methods 
e create 
e delay 
e destroy 
e  focusable 
e  getCreateEventData 


e getCreateOptions 
e hide 
e  hoverable 


e init 

e off 

e on 

e setOption 
e setOptions 
e show 

e super 


e superApply 
e trigger 

e destroy 

e disable 

e enable 

e option 

e widget 


Events 
e create 
Options 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 该 小 部 件 。Code examples: 


初始 化 带 有 指定 disabled 选项 的 小 部 件 : 


$( ".selector" ) ,widget({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).widget( "option", "disabled" ); 


// setter 
$( ".selector" ).widget( "option", "disabled", true ); 


hideType: Boolean or Number or String or Object 


Default: null 是 否 使 用 动画 隐藏 元 素 ， 以 及 如 何 动画 隐藏 元 素 。 支 持 多 个 类 型 : 


e Boolean : 当 设 置 为 false 时 ， 则 不 使 用 动画 ， 元 素 会 立即 隐藏 。 当 设置 为 true Hj, 
元 素 会 使 用 默认 的 持续 时 间 和 默认 的 easing 淡出 。 

e Number : 元 素 将 使 用 指定 的 持续 时 间 和 默认 的 easing 淡出 。 

String : 元 素 将 使 用 指定 的 特效 隐藏 。 该 值 可 以 是 一 个 内 建 的 jQuery 动画 方法 名 称 ， 比 

如 "slideup" ， 也 可 以 是 一 个 jQuery Ul 特效 的 名 称 ， 比 如 "fold" 。 以 上 两 种 情况 的 特 

效 将 使 用 默认 的 持续 时 间 和 默认 的 easing. 

Object : 如 果 值 是 一 | 对 象 ， 则 effect, delay, duration 和 easing 属性 会 被 提 

供 。 如 果 effect 属性 包含 jQuery 方法 的 名 称 ， 则 使 用 该 方法 ， 否 则 ， 它 被 认为 是 一 个 

jQuery UI 特效 的 名 称 。 当 使 用 一 个 支持 额外 设置 的 jQuery Ul 特效 时 ， 您 可 以 在 对 象 中 

包含 这 些 设置 ， 且 它们 会 被 传递 给 特效 。 如 果 duration 或 easing 被 省 略 ， 则 使 用 上 默 

认 值 。 如 果 effect 被 省 略 ， 则 使 用 "fadeout" 。 如 果 delay 被 省 略 ， 则 不 使 用 延 


iR 


Code examples: 
初始 化 带 有 指定 hide 选项 的 小 部 件 : 


$( ".selector" ) ,widget({ hide: { effect: "explode", duration: 1000 } }); 


在 初始 化 后 ， 获 取 或 设置 hide 选项 : 
// getter 
var hide = $( ".selector" ).widget( "option", "hide" ); 


// setter 
$( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } ); 


showType: Boolean or Number or String or Object 


Default: null 是 否 使 用 动画 显示 元 素 ， 以 及 如 何 动画 显示 元 素 。 支 持 多 个 类 型 : 


Boolean : 当 设 置 为 false 时 ， 则 不 使 用 动画 ， 元 素 会 立即 显示 。 当 设置 为 true 时 ， 

元 素 会 使 用 默认 的 持续 时 间 和 默认 的 easing RA. 

。 Number : 元 素 将 使 用 指定 的 持续 时 间 和 默认 的 easing 淡 入 。 

String : 元 素 将 使 用 指定 的 特效 显示 。 该 值 可 以 是 一 个 内 建 的 jQuery 动画 方法 名 称 ， 比 
如 "slidepown" ， 也 可 以 是 一 个 jQuery Ul 特效 的 名 称 ， 比 如 "fola" 。 以 上 两 种 情况 的 
特效 将 使 用 默认 的 持续 时 间 和 默认 的 easing。 

Object : 如 果 值 是 一 个 对 象 ， 则 effect 、 delay 、 duration 和 easing 属性 会 被 提 

供 。 如 果 effect 属性 包含 jQuery 方法 的 名 称 ， 则 使 用 该 方法 ， 否 则 ， 它 被 认为 是 一 个 
jQuery UI 特效 的 名 称 。 当 使 用 一 个 支持 额外 设置 的 jQuery Ul 特效 时 ， 您 可 以 在 对 象 中 
包含 这 些 设置 ， 且 它们 会 被 传递 给 特效 。 如 果 duration 或 easing MAR, WAR 
认 值 。 如 果 effect 被 省 略 ， 则 使 用 "fadern" 。 如 果 delay 被 省 略 ， 则 不 使 用 延迟 。 


Code examples: 
初始 化 带 有 指定 show 选项 的 小 部 件 : 


$( ".selector" ).widget({ show: { effect: "blind", duration: 800 } }); 


在 初始 化 后 ， 获 取 或 设置 show 选项 : 


// getter 
var show = $( ".selector" ).widget( "option", "show" ); 


// setter 
$( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } ); 


Methods 


_create()Returns: jQuery (plugin only) 


_create() Ake) ERKA RASM, (BS this.element 和 this.options 已 经 
设置 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


基于 一 个 选项 设置 小 部 件 元 素 的 背景 颜色 。 


_create: function() { 
this.element.css( "background-color", this.options.color ); 


} 


_delay( fn [, delay ] )Returns: Number 


FEUER RIN. RF this 上 下 文正 确 。 本 质 上 是 setrimeout() o 
使 用 clearrimeout() 返回 超时 ID. 


e fnType: Function() or String 要 调用 的 函数 。 也 可 以 是 小 部 件 上 方法 的 名 称 。 
e delayType: Number 调 用 画 数 前 等 待 的 毫秒 数 ， 默 认为 o. 


Code examples: 


100 毫秒 后 在 小 部 件 上 调用 fo 73k. 


this. delay( this. foo, 100 ); 


_destroy()Returns: jQuery (plugin only) 


公共 的 destroy) 方法 清除 所 有 的 公共 数据 、 事 件 等 等 。 代 表 了 定制 、 指 定 小 部 件 、 清 理 的 


_destroy() o 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


当 小 部 件 被 销毁 时 ， 从 小 部 件 的 元 素 移 除 一 个 class。 


_destroy: function() { 
this.element.removeClass( "my-widget" ); 


} 


_focusable( element )Returns: jQuery (plugin only) 


建立 聚焦 在 元 素 上 时 要 应 用 ui-state-focus 的 element o 
事件 处 理 程序 在 销毁 时 自动 清理 。 

。 elementType: jQuery 要 应 用 focusable 行为 的 元 素 。 
Code examples: 


向 小 部 件 内 的 一 组 元 素 应 用 focusable 样式 : 


this._focusable( this.element.find( ".my-items" ) ); 


_getCreateEventData()Returns: Object 


所 有 的 小 部 件 触发 create 事件 。 默 认 情 况 下 ， 事 件 中 不 提供 任何 的 数据 ， 但 是 该 方法 会 返 
回 一 个 对 象 ， 作为 create 事件 的 数据 被 传递 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


向 create 事件 义理 程序 传递 小 部 件 的 选项 ， 作 为 参数 。 


_getCreateEventData: function() { 
return this.options; 


_getCreateOptions()Returns: Object 


该 方法 允许 小 部 件 在 初始 化 期 间 为 定义 选项 定义 一 个 自 定义 的 方法 。 用 户 提供 的 选项 会 覆盖 
该 方法 返回 的 选项 ， 即 会 覆盖 默认 的 选项 。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


让 小 部 件 元 素 的 id 属性 作为 选项 可 用 。 


_getCreateOptions: function() { 
return { id: this.element.attr( "id" ) }; 


_hide( element, option [, callback ] )Returns: jQuery (plugin 
only) 


使 用 内 置 的 动画 方法 或 使 用 自 定义 的 特效 隐藏 一 个 元 素 。 如 需 了 解 可 能 的 option 值 ， 请 查 
看 hide。 


e elementType: jQuery 要 隐藏 的 元 素 。 
e optionType: Object 定 义 如 何 隐藏 元 素 的 设置 。 
e callbackType: Function() 元 素 完全 隐藏 后 要 调用 的 回调 。 


Code examples: 
ABEL AHH hide 选项 。 


this. hide( this.element, this.options.hide, function() { 


// Remove the element from the DOM when it's fully hidden. 
$( this ).remove(); 


3); 


. hoverable( element )Returns: jQuery (plugin only) 


建立 悬浮 在 元 素 上 时 要 应 用 ui-state-hover class 的 element o 
事件 处 理 程 序 在 销毁 时 自动 清理 。 

。 elementType: jQuery 要 应 用 hoverable 行为 的 元 素 。 
Code examples: 


当 悬 浮 在 元 素 上 时 ， 向 元 素 内 所 有 的 alt;divagt; 应 用 hoverable 样式 。 


this._hoverable( this.element.find( "div" ) ); 


_init()Returns: jQuery (plugin only) 


小 部 件 初始 化 的 理念 与 创建 不 同 。 任 何 时 候 不 带 参 数 的 调用 插件 或 者 只 带 一 个 选项 哈 希 的 调 
用 插件 ， 初 始 化 小 部 件 。 当 小 部 件 被 创建 时 会 包含 这 个 方法 。 


注意 : 如 果 存 在 不 带 参数 成 功 调用 小 部 件 时 要 执行 的 逻辑 动作 ， 初 始 化 只 能 在 这 时 处 理 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


如 果 设 置 了 autoopen 选项 ， 则 调用 open() 方法 。 


_init: function() { 
if ( this.options.autoOpen ) { 
this.open(); 


_off( element, eventName )Returns: jQuery (plugin only) 
从 指定 的 元 素 取消 绑 定 事件 处 理 程序 。 


e elementType: jQuery 要 取消 绑 定 事件 处 理 程序 的 元 素 。 不 像 _on() 方法 ， _off() A 
法 中 元 素 是 必需 的 。 
e eventNameType: String 一 个 或 多 个 空格 分 隔 的 事件 类 型 。 


Code examples: 


从 小 部 件 的 元 素 上 取消 绑 定 所 有 click 事件 。 


this. off( this.element, "click" ); 


_on( [suppressDisabledCheck ] [, element ], handlers 
JReturns: jQuery (plugin only) 


授权 通过 事件 名 称 内 的 选择 器 被 支持 ， 例 如 "click .foo "。 _on() 方法 提供 了 一 些 直 接 事件 
HR GEBURT RA : 
e 保持 处 理 程序 内 适当 的 this EFX. 
e 自动 处 理 禁 用 的 部 件 : 如 果 小 部 件 被 禁用 或 事件 发 生 在 带 有 ui-state-disabled class 的 
元 素 上 ， 则 不 调用 事件 处 理 程序 。 可 以 被 suppressDisabledcheck BMBF, 
e 事件 义理 程序 会 自动 添加 命名 空间 ， 在 销毁 时 会 自 自动 清理 


e suppressDisabledCheck (default: false )Type: Boolean 是 否 要 绕 过 禁用 的 检查 。 


e elementType: jQuery 要 绑 定 事件 义理 程序 的 元 素 。 如 果 未 提供 元 素 ， this.element 用 
于 未 授权 的 事件 ， widget 元 素 用 于 授权 的 事件 。 

。 handlersType: Object 一 个 map， 其 中 字符 串 键 代表 事件 类 型 ， 可 选 的 选择 器 用 于 授 
Ax, (ARB A RR. 


Code examples: 


放置 小 部 件 元 素 内 所 有 被 点 击 的 链接 的 默认 行为 。 


this._on( this.element, { 
"click a": function( event ) { 
event.preventDefault(); 


} 
3) 


_setOption( key, value )Returns: jQuery (plugin only) 
为 每 个 独立 的 选项 调用  setoptions() 方法 。 小 部 件 状态 随 着 改变 而 更 新 。 


e keyType: String 要 设置 的 选项 名 称 。 
e valueType: Object 为 选项 设置 的 值 。 


Code examples: 


当 小 部 件 的 height 或 width 选项 改变 时 ， 更 新 小 部 件 的 元 素 。 


_setOption: function( key, value ) { 
if ( key === "width" ) { 
this.element.width( value ); 


} 
if ( key === "height" ) { 
this.element.height( value ); 


this. super( key, value ); 


_setOptions( options )Returns: jQuery (plugin only) 


当 调 用 option() 方法 时 调用 ， 无 论 以 什么 形式 调用 option() o 


如 果 您 要 根据 多 个 选项 的 改变 而 改变 处 理 器 密集 型 ， 重 载 该 方法 是 很 有 用 的 。 
e optionsType: Object 要 设置 的 选项 - 值 对 。 
Code examples: 


如 果 小 部 件 的 height 或 width AAAF, AA resize) 方法 。 


_setOptions: function( options ) { 
var that = this, 
resize = false; 
$.each( options, function( key, value ) { 
that._setOption( key, value ); 


if ( key === "height" || key === "width" ) { 
resize = true; 
i 
3; 


if ( resize ) { 
this.resize(); 


} 
} 


_show( element, option [, callback ] )Returns: jQuery 
(plugin only) 


使 用 内 置 的 动画 方法 或 使 用 自 定义 的 特效 显示 一 个 元 素 。 如 需 了 解 可 能 的 option 值 ， 请 查 
看 show。 


e elementType: jQuery 要 显示 的 元 素 。 
e optionType: Object 定义 如 何 显示 元 素 的 设置 。 
。 callbackType: Function() 元 素 完 全 显示 后 要 调用 的 回调 。 


Code examples: 


为 自 定义 动画 传递 show 选项 。 


this. show( this.element, this.options.show, function() { 


// Focus the element when it's fully visible. 
this.focus(); 


} 


_super( [arg ] [, ... ] )Returns: jQuery (plugin only) 


从 父 部 件 中 调用 相同 名 称 的 方法 ， 带 有 任意 指定 的 参数 。 本 质 上 是 .call() o 
e argType: Object 要 传递 给 父 部 件 的 方法 的 需 到 多 个 参数 。 


Code examples: 


义理 title 选项 更 新 ， 并 调用 付 部 件 的 _setoption() 来 更 新 选项 的 内 部 存储 。 


_setOption: function( key, value ) { 
if ( key === "title" ) { 
this.element.find( "h3" ).text( value ); 


this._super( key, value ); 


_superApply( arguments )Returns: jQuery (plugin only) 
从 父 部 件 中 调用 相同 名 称 的 方法 ， 带 有 参数 的 数组 。 本 质 上 是 .apply() 。 

。 argumentsType: Array 要 传递 给 父 部 件 的 方法 的 参数 数组 。 
Code examples: 


义理 title 选项 更 新 ， 并 调用 付 部 件 的 _setoption() 来 更 新 选项 的 内 部 存储 。 


_setOption: function( key, value ) { 
if ( key === "title" ) { 
this.element.find( "h3" ).text( value ); 


this. superApply( arguments ); 


_trigger( type [, event ] [, data ] )Returns: Boolean 
触发 一 个 事件 及 其 相关 的 回调 。 

带 有 该 名 称 的 选项 与 作为 回调 被 调用 的 类 型 相等 。 

事件 名 称 是 小 部 件 名 称 和 类 型 的 小 写字 母 串 。 

注意 : 当 提供 数据 时 ， 您 必须 提供 所 有 三 个 参数 。 如 果 没有 传递 事件 ， 则 传递 nal. 


如 果 默 认 行 为 是 阻止 的 ， 则 返回 false, AM RE] true 。 当 义理 程序 返回 false 时 或 调 
FH event.preventDefault() 时 ， 则 阻止 默认 行为 发 生 。 


。 typeType: StringThe type 应 该 匹配 回调 选项 的 名 称 。 完 整 的 事件 类 型 会 自动 生成 。 
e eventType: Event 导 致 该 事件 发 生 的 原始 事件 ， 想 听众 提供 上 下 文 时 很 有 用 。 
e dataType: Object 一 个 与 事件 相关 的 数据 哈 希 。 


Code examples: 


当 按 下 一 个 键 时 ， 触 发 search 事件 。 


this._on( this.element, { 
keydown: function( event ) { 


// Pass the original event so that the custom search event has 
// useful information, such as keyCode 
this._trigger( "search", event, { 

// Pass additional information unique to this event 

value: this.element.val() 


3) 
} 
3); 


destroy()Returns: jQuery (plugin only) 


完全 移 除 小 部 件 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


当 点 击 小 部 件 的 任意 错 点 时 销毁 小 部 件 。 


this._on( this.element, { 

"Click a": function( event ) { 
event. preventDefault(); 
this.destroy(); 

} 

}); 


disable()Returns: jQuery (plugin only) 
禁用 小 部 件 。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


当 点 击 小 部 件 的 任意 锚 点 时 禁用 小 部 件 。 


this. on( this.element, { 

"click a": function( event ) { 
event.preventDefault(); 
this.disable(); 

} 

}); 


enable()Returns: jQuery (plugin only) 


启用 小 部 件 。 
。 该 方法 不 接受 任何 参数 。 


Code examples: 


当 点 击 小 部 件 的 任意 锚 点 时 启用 小 部 件 。 


this. on( this.element, { 
"Click a": function( event ) { 
event.preventDefault(); 
this.enable(); 


} 
3); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

e optionNameType: String 要 获取 的 选项 的 名 称 。 
Code examples: 
获得 width 选项 的 值 。 


this.option( "width" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 小 部 件 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


Log the key and value of each of the widget's options for debugging. 


var options = this.option(); 
for ( var key in options ) { 
console.log( key, options[ key ] ); 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 小 部 件 选 项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


设置 width 选项 为 ”566 。 


this.option( "width", 500 ); 


option( options )Returns: jQuery (plugin only) 
为 小 部 件 设置 一 个 或 多 个 选项 。 
e optionsType: Object 要 设置 的 option-value xt, 
Code examples: 
设置 height 和 width 选项 为 500 。 


this.option({ 

width: 500, 
height: 500 
3); 


widget()Returns: jQuery 

返回 一 个 包含 原始 元 素 或 其 他 相关 的 生成 元 素 的 jquery TR. 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

当 创建 小 部 件 时 ， 在 小 部 件 的 原始 元 素 周围 放 置 一 个 红色 的 边框 。 


_create: function() { 
this.widget().css( "border", "2px solid red" ); 


} 


Events 


create( event, ui )Type: widgetcreate 


当 小 部 件 被 创建 时 触发 。 


e eventType: Event 
e uiType: Object 


Note: ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 小 部 件 : 


$( ".selector" ).widget({ 
create: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 widgetcreate 事件 : 


$( ".selector" ).on( "widgetcreate", function( event, ui ) {} ); 


Widget Plugin Bridge 


Categories: Utilities | Widgets 


jQuery.widget.bridge( name, constructor ) 


Description: jquery.widget.bridge() 方法 是 jQuery 部 件 库 (Widget Factory) 的 一 部 分 。 
它 扮演 着 由 $.widget() 创建 的 对 象 和 jQuery API 之 间 的 中 介 。 


。 jQuery.widget.bridge( name, constructor ) 


o nameType: String 要 创建 的 插件 名 称 。 
o constructorType: Function() 当 插件 被 调用 时 要 实例 化 的 对 象 。 


$.widget.bridge() 做 如 下 事情 : 


e 连接 一 个 常规 的 JavaScript HERRE jQuery API. 
© 自动 创建 对 象 实例 ， 并 存储 在 元 素 的 $.data 缓存 内 。 
。 人 允许 调用 公有 方法 。 

。 防止 调用 私有 方法 。 

。 防止 在 未 初始 化 的 对 象 上 调用 方法 。 

。 防止 多 个 初始 化 。 


jQuery Ul 小 部 件 使 用 $.widget( "foo.bar", {} ); 语法 定义 一 个 对 象 来 创建 。 给 出 一 个 带 有 
五 个 .foo, $( ".foo" ).bar(); BY DOM 结构 将 创建 "bar" 对 象 的 五 个 实 

例 。 $.widget .bridge() 基于 "bar" 对 象 和 一 个 公共 的 API 在 库 内 工作 。 因 此 ， 您 可 以 通过 编 
写 $(".foo" ).bar() 来 创建 实例 ， 通 过 编写 $( ".foo" ).bar( "baz" ) 来 调用 方法 。 


如 果 您 只 想 一 次 性 初始 化 并 调用 方法 ， 那 么 您 所 传递 给 jQuery.widget.bridge() 的 对 象 可 以 
很 小 : 


var Highlighter = function( options, element ) { 
this.options = options; 
this.element = $( element ); 
this._set( 800 ); 


3 
Highlighter.prototype = { 
toggle: function() { 
this. set( this.element.css( "font-weight") --- 400 ? 800 : 400 ); 


_set: function(value) { 
this.element.css( "font-weight", value ); 


Ww 


在 这 里 ， 您 需要 的 只 是 一 个 构造 酚 数 ， 接 收 两 个 参数 : 


* options : 一 个 配置 选项 的 对 象 
e element : 该 实例 在 其 上 创建 的 DOM 元 素 


然后 您 可 以 使 用 桥 (bridge) 把 该 对 象 作 为 一 个 jQuery 插件 ， 且 可 以 在 任意 的 jQuery 对 象 上 
使 用 它 : 
// Hook up the plugin 
$.widget.bridge( "colorToggle", Highlighter ); 
// Initialize it on divs 
$( "div" ).colorToggle().click(function() { 
// Call the public method on click 


$( this ).colorToggle( "toggle" ); 
15 


为 了 使 用 桥 (bridge) 的 所 有 特性 ， 您 的 对 象 原型 需要 有 一 个 init() 方法 。 该 方法 在 调用 
插件 且 实 例 已 存在 时 调用 。 在 这 种 情况 下 ， 您 还 需要 有 一 个 option() 方法 。 该 方法 将 会 以 
选项 作为 第 一 个 参数 被 调用 。 如 果 没 有 选项 ， 则 参数 为 一 个 空 对 象 。 如 需 了 解 option 方法 
的 使 用 ， 请 查看 $.widget o 


桥 (bridge) 有 一 个 可 选 的 属性 ， 如 果 存 在 : 如 果 对 象 原型 有 一 个 widgetFullName BIE, W) 
该 属性 将 被 作为 存储 和 检索 实例 的 键 。 否 则 ， 将 使 用 name 参数 。 


Widgets 


小 部 件 (Widgets) 是 功能 丰富 、 有 状态 的 插件 ， 它 有 一 个 完整 的 生命 周期 ， 带 有 方法 和 事 
件 。 您 可 以 查看 部 件 库 (Widget Factory) 文档 了 解 更 多 详情 。 


Accordion Widget 


把 一 对 标题 和 内 容 面 板 转换 成 折 营 面板 。 


Autocomplete Widget 


自动 完成 功能 根据 用 户 输入 值 进行 搜索 和 过 滤 ， 让 用 户 快速 找到 并 从 预 设 值 列表 中 选择 。 


Button Widget 


可 主题 化 的 按钮 和 按钮 集合 。 


Datepicker Widget 
从 弹出 框 或 在 线 日 历 选择 一 个 日 期 。 
Dialog Widget 

在 一 个 交互 覆盖 层 中 打开 内 容 。 


Also in: Utilities 


Widget Factory 


使 用 与 所 有 jQuery UI 小 部 件 相同 的 抽象 化 来 创建 有 状态 的 jQuery 插件 。 


Also in: Utilities 


Widget Plugin Bridge 


jQuery.widget.bridge() 方法 是 jQuery 部 件 库 (Widget Factory) 的 一 部 分 。 它 扮演 着 由 
$.widget() 创建 的 对 象 和 jQuery API 之 间 的 中 介 。 


Menu Widget 


带 有 鼠标 和 键盘 交互 的 用 于 导航 的 可 主题 化 菜单。 
Progressbar Widget 

显示 一 个 确定 的 或 不 确定 的 进程 状态 。 
Slider Widget 


拖 动 手柄 可 以 选择 一 个 数值 。 


Spinner Widget 


通过 向 上 /向 下 按钮 和 箭头 键 处 理 ， 为 输入 数值 增强 文本 输入 功能 。 


Tabs Widget 


一 种 多 面板 的 单 内 容 区 ， 每 个 面板 与 列表 中 的 标题 相关 。 


Tooltip Widget 


可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 原 生 的 工具 提示 框 。 


Accordion Widget 


Categories: Widgets 


version added: 1.0 


Description: f&— xt 7 AAAS Hts EXIT & HAR (Accordion) 。 


QuickNavExamples 


Options 


e active 

e animate 

e collapsible 
e disabled 

e event 

e header 
heightStyle 
e icons 


Methods 


e destroy 
e disable 
e enable 
e option 

e refresh 
e widget 


Events 


e activate 
e beforeActivate 
e create 


你 的 accordion 容 器 需要 按照 一 个 元 素 成 组 的 满足 拥有 配对 的 头 部 和 内 容 面板 的 格式 要 求 : 


<div id="accordion"> 
<h3>First header</h3> 
<div>First content panel</div> 
<h3>Second header</h3> 
<div>Second content panel</div> 
</div> 


Accordions (mmi) 支持 任意 的 标记 ， 但 每 个 内 容 面板 必须 始终 是 其 相关 联 头 部 之 后 的 
下 一 个 兄弟 节点 。 请 参阅 有 关 如 何 使 用 自 定义 标记 结构 的 header 选项 。 


面板 可 以 通过 设置 active 选项 来 激活 。 


ht f; XH (Keyboard interaction) 


当 和 焦点 在 标题 (header) 上 时 ， 下 面 的 键盘 命令 可 用 : 


e UP/LEFT - 移动 焦点 到 上 一 个 标题 (header) 。 如 果 在 第 一 个 标题 (header) 上 ， 则 移 
动 焦点 到 最 后 一 个 标题 (header) 上 。 

e DOWN/RIGHT - 移动 焦点 到 下 一 个 标题 (header) 。 如 果 在 最 后 一 个 标题 (header) 
上 ， 则 移动 焦点 到 第 一 个 标题 (header) 上 。 

。 HOME -移动 焦点 到 第 一 个 标题 (header) E, 

e END - 移动 焦点 到 最 后 一 个 标题 (header) 上 。 

e SPACE/ENTER - 激活 与 获得 焦点 的 标题 (header) 相关 的 面板 (panel) 。 


当 焦 点 在 面板 (pane) 中 时 ， 下 面 的 键盘 命令 可 用 : 


e CTRL+UP: 移动 焦点 到 相关 的 标题 (header) 。 


主题 (Theming) 


折 彼 面板 部 件 (Accordion Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 折 党 面板 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : ui-accordion : 
折 受 面板 的 外 层 容 器 。 ui-accordion-header : 折 营 面板 的 标题 。 如 果 标 题 包 含 icons， 则 标题 
会 另外 有 个 ui-accordion-icons class, ui-accordion-content : 折 重 面板 的 内 容 面板 。 


Hä mig (Accordion Widget) 使 用 jQuery UI CSS framework 框架 来 定义 它 的 外 观 和 
感 观 的 样式 。 如 果 需 要 使 用 折 受 面板 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


*  ui-accordion : 折 受 面板 的 外 层 容器 。 
© ui-accordion-header : 折 秋 面板 的 标题 。 如 果 标 题 包 含 icons ， 则 标题 会 另外 有 个 
ui-accordion-icons Class。 


o  ui-accordion-content : 折 受 面板 的 内 容 面板 。 


依赖 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e 特效 核心 (Effects Core) (PÉJ; 4S animate 选项 一 起 使 用 时 ) 


其 他 注意 事项 : 
e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


选项 


activeType: Boolean or Integer 


Default: o 当前 打开 哪 一 个 面板 。 支 持 多 个 类 型 : 


e Boolean: 设 置 active Jj false 将 折 和 县 所 有 的 面板 。 这 要 求 collapsible 选项 必须 为 
true o 


e Integer: 激活 打开 的 面板 素 引 ， 以 需 为 基础 。 负 值 则 表示 从 最 后 一 个 面板 后 退 选 择 面板 。 
Code examples: 


初始 化 带 有 指定 active 选项 的 Accordion ( 折 受 面板 ) 


$( ".selector" ).accordion({ active: 2 }); 


在 初始 化 后 ， 获 取 或 设置 active 选项 : 


// getter 

var active = $( ".selector" ).accordion( "option", "active" ); 
// setter 

$( ".selector" ).accordion( "option", "active", 2 ); 


animateType: Boolean or Number or String or Object 


Default: {} 是 否 使 用 动画 改变 面板 ， 且 如 何 使 用 动画 改变 面板 。 支 持 多 个 类 型 : 


e Boolean: false 值 将 禁用 动画 。 
e Number: 默认 easing 动画 的 持续 时 间 ， 以 毫秒 为 单位 。 
。 String: 默认 的 持续 时 间 要 使 用 的 easing 动画 形式 名 称 。 
e Object: easing 和 duration 属性 的 动画 设置 。 
o 上 面 任意 的 选项 都 可 以 包含 down 属性 。 
o 当 被 激活 的 面板 有 一 个 比 当 前 激活 面板 较 低 的 指数 时 ， 发 生 "Down" 动画 。 


Code examples: 


初始 化 带 有 指定 animate 选项 的 Accordion (1f à m4) 


$( ".selector" ).accordion({ animate: "bounceslide" }); 


在 初始 化 后 ， 获 取 或 设置 animate 选项 : 
// getter 
var animate = $( ".selector" ).accordion( "option", "animate" ); 


// setter 
$( ".selector" ).accordion( "option", "animate", "bounceslide" ); 


collapsibleType: Boolean 
Default: false 所 有 部 分 是 否 都 可 以 马上 关闭 。 人 允许 折 受 激活 的 部 分 。Code examples: 


初始 化 带 有 指定 collapsible 选项 的 Accordion ( 折 受 面板 ) 


$( ".selector" ).accordion({ collapsible: true }); 


在 初始 化 后 ， 获 取 或 设置 collapsible 选项 : 
// getter 
var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); 


// setter 
$( ".selector" ).accordion( "option", "collapsible", true ); 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 该 Accordion (ifr mR) . Code examples: 


初始 化 带 有 指定 disabled 选项 的 Accordion (#1 & mR) 


$( ".selector" ).accordion({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).accordion( "option", "disabled" ); 


// setter 
$( ".selector" ).accordion( "option", "disabled", true ); 


eventType: String 


Default: "click" Accordion (H&m) 头 部 会 作出 反应 的 事件 ， 用 以 激活 相关 的 面板 。 可 
以 指定 多 个 事件 ， 用 空格 隔 开 。Code examples: 


初始 化 带 有 指定 event 选项 的 Accordion (4r #2 Ht) 


$( ".selector" ).accordion({ event: "mouseover" }); 


在 初始 化 后 ， 获 取 或 设置 event 选项 : 


// getter 
var event = $( ".selector" ).accordion( "option", "event" ); 


// setter 
$( ".selector" ).accordion( "option", "event", "mouseover" ); 


headerType: Selector 
Default: "> 1i > :first-child,» :not(li):even" 


标题 元 素 的 选择 器 ， 通 过 主要 accordion TREN .find() 进行 应 用 。 内 容 面板 必须 是 紧 跟 
在 与 其 相关 的 标题 后 的 同 级 元 素 。 


Code examples: 


初始 化 带 有 指定 header 选项 的 Accordion ( 折 受 面板 ) 


$( ".selector" ).accordion({ header: "h3" }); 


在 初始 化 后 ， 获 取 或 设置 header 选项 : 


// getter 
var header = $( ".selector" ).accordion( "option", "header" ); 


// setter 
$( ".selector" ).accordion( "option", "header", "h3" ); 


heightStyleType: String 
Default: "auto" 


控制 Accordion Gr mik) 和 每 个 面板 的 高 度 。 可 能 的 值 : 


^ 


* "auto" : 所 有 的 面板 将 会 被 设置 为 最 高 的 面板 的 高 度 。 
e "fill" : 基于 accordion 的 父 元 素 的 高 度 ， 扩 展 到 可 用 的 高 度 。 
@ "content" : 每 个 面板 的 高 度 取决 于 它 的 内 容 。 


Code examples: 


初始 化 带 有 指定 heightstyle 选项 的 Accordion (#1 mir) 


$( ".selector" ).accordion({ heightStyle: "fill" }); 


在 初始 化 后 ， 获 取 或 设置 heightstyle 选项 : 


// getter 
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); 


// setter 
$( ".selector" ).accordion( "option", "heightStyle", "fill" ); 


iconsType: Object 


Default: { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" } 


标题 要 使 用 的 图 标 ， 和 与 jQuery UI CSS 框架 提供 的 图 标 (Icons) 匹配 。 设 置 为 false 则 不 显 
TA Ho 


e header (string, 默认 值 : "ui-icon-triangle-1-e") 
e activeHeader (string, 默认 值 : "ui-icon-triangle-1-s") 


Code examples: 

初始 化 带 有 指定 icons 选项 的 Accordion (4f Ts) 
$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon- 

JETT ÁÁ 


在 初始 化 后 ， 获 取 或 设置 icons 选项 : 





// getter 

var icons = $( ".selector" ).accordion( "option", "icons" ); 

// setter 

$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader" 


[Et Lucae] 





Methods 


destroy()Returns: jQuery (plugin only) 


完全 移 除 accordion 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
e 该 方法 不 接受 任何 参数 。 


Code examples: 


调用 destroy 方法 : 


$( ".selector" ).accordion( "destroy" ); 


disable()Returns: jQuery (plugin only) 


禁用 accordion, 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).accordion( "disable" ); 


enable()Returns: jQuery (plugin only) 


启用 accordion. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).accordion( "enable" ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).accordion( "option", "disabled" 


option()Returns: PlainObject 
获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 accordion 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 


Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).accordion( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 accordion 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).accordion( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 accordion 设置 一 个 或 多 个 选项 。 

e optionsType: Object 要 设置 的 option-value 对 。 
Code examples: 


调用 该 方法 : 


$( ".selector" ).accordion( "option", { disabled: true } ) 


refresh()Returns: jQuery (plugin only) 


处 理 任 何在 DOM 中 直接 添加 或 移 除 的 标题 和 面板 ， 并 重新 计算 accordion 的 高 度 。 结 果 取 决 


于 内 容 和 heightstyle 选项 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 refresh 方法 : 


$( ".selector" ).accordion( "refresh" ); 


widget()Returns: jQuery 

返回 一 个 包含 accordion 的 jquery 对 象 。 
e 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 widget 方法 : 


var widget = $( ".selector" ).accordion( "widget" ); 


Events 


activate( event, ui )Type: accordionactivate 


面板 被 激活 后 触发 (在 动画 完成 之 后 ) o WR accordion ZAZA, N) ui.oldHeader 和 
ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 accordion 1ETETIT #, W] ui.newHeader 和 
ui.newPanel 将 是 空 的 jQuery 对 象 。 


注意 : 由 于 activate 事件 只 有 在 面板 激活 时 才能 触发 ， 当 创建 accordion BAN, RAN 
面板 不 会 触发 该 事件 。 如 果 您 需要 一 个 用 于 部 件 创建 的 钓 ， 请 使 用 create 事件 。 


e eventType: Event 
e uiType: Object 
o newHeaderType: jQuery 刚 被 激活 的 标题 。 
o oldHeaderType: jQuery 刚 被 取消 激活 的 标题 。 
o newPanelType: jQuery 刚 被 激活 的 面板 。 
o oldPanelType: jQuery 刚 被 取消 激活 的 面板 。 


Code examples: 


初始 化 带 有 指定 activate 回调 的 accordion : 


$( ".selector" ).accordion({ 
activate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 accordionactivate 事件 : 


$( ".selector" ).on( "accordionactivate", function( event, ui ) {} ); 


beforeActivate( event, ui )Type: accordionbeforeactivate 


面板 被 激活 前 直接 触发 。 可 以 取消 以 防止 面板 被 激活 。 如 果 accordion 当前 是 折 受 的 ， 则 
ui.oldHeader 和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 accordion 正在 折合 ， 则 
ui.newHeader 和 ui.newPanel 将 是 空 的 jQuery 对 象 。 


e eventType: Event 
e uiType: Object 
o newHeaderType: jQuery 将 被 激活 的 标题 。 
o oldHeaderType: jQuery 将 被 取消 激活 的 标题 。 
o newPanelType: jQuery 将 被 激活 的 面板 。 
o oldPanelType: jQuery 将 被 取消 激活 的 面板 。 


Code examples: 


初始 化 带 有 指定 beforeActivate 回调 的 accordion : 


$( ".selector" ).accordion({ 
beforeActivate: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 accordionbeforeactivate 事件 : 


$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} ); 


create( event, ui )Type: accordioncreate 


当 创 建 accordion 时 触发 。 如 果 accordion HiT BS, ui.header 和 ui.panei 将 是 空 的 
jQuery 对 象 。 


e eventType: Event 

e uiType: Object 
o headerType: jQuery 激活 的 标题 。 
o panelType: jQuery 激活 的 面板 。 


Code examples: 


初始 化 带 有 指定 create 回调 的 accordion : 


$( ".selector" ).accordion({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 accordioncreate 事件 : 


$( ".selector" ).on( "accordioncreate", function( event, ui ) () ); 


Example: 


一 个 简单 的 jQuery UI {r mtk (Accordion) 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>accordion demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="accordion"> 
<h3>Section 1</h3> 
<div> 
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. 
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, 
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. 
Nam mi. Proin viverra leo ut odio.</p> 
</div> 
<h3>Section 2</h3> 
<div> 
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. 
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, 
faucibus interdum tellus libero ac justo.</p> 
</div> 
<h3>Section 3</h3> 
<div> 
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 
Quisque lobortis.Phasellus pellentesque purus in massa.</p> 
<ul> 
<li>List item one</1li> 
<li>List item two</li> 
<li>List item three</li> 
«/ul» 
</div> 
</div> 


<script> 
$( "#accordion" ).accordion(); 
</script> 


</body> 
</html> 


ES 





Autocomplete Widget 


Categories: Widgets 


version added: 1.8 


Description: 自动 完成 功能 根据 用 户 输 入 值 进行 搜索 和 过 滤 ， 让 用 户 快速 找到 并 从 预 设 值 列 
表 中 选择 。 


QuickNavExamples 


Options 


e append To 
e autoFocus 
e delay 

e disabled 
e minLength 
e position 

e source 


Methods 


e close 

e destroy 
e disable 
e enable 
e option 

e search 
e widget 


Extension Points 


e  renderltem 
e. renderMenu 
e  resizeMenu 


Events 


e change 
e close 

e create 

e focus 

e open 

e response 
e search 

e select 


任何 可 以 接收 输入 的 字段 都 可 以 转换 为 Autocomplete, BU, &it;input&gt; 元 
素 ， &lt;textarea&gt; 元 素 及 带 有 contenteditable 属性 的 元 素 。 


通过 给 Autocomplete 字段 焦点 或 者 在 其 中 输入 字符 ， 插 件 开始 搜索 匹配 的 条 目 并 显示 供 选 择 
的 值 的 列表 。 通 过 输入 更 多 的 字符 ， 用 户 可 以 过 滤 列 表 以 获得 更 好 的 匹配 。 


该 部 件 可 用 于 选择 先前 选 定 的 值 ， 比 如 输入 文章 标签 或 者 输入 从 地 址 筹 中 输入 地 址 邮件 地 
址 。Autocomplete 也 可 以 用 来 填充 相关 的 信息 ， 比 如 输入 一 个 城市 的 名 称 来 获得 该 城市 的 邮 
政 编码 。 


您 可 以 从 本 地 源 或 者 远程 源 获 取 数 据 : 本 地 源 适用 于 小 数据 集 ， 例 如 ， 带 有 50 个 条 目的 地 址 
8 ; 远程 源 适用 于 大 数据 集 ， 上 比如 ， 带 有 数 百 个 或 者 成 千 上 万 个 条 目的 数据 亩 。 如 需 了 解 更 
多 有 关 自 定义 数据 源 的 信息 ， 请 查看 source 选项 的 文档 。 


ht ft XH (Keyboard interaction) 


当 菜 单打 开 时 ， 下 面 的 键盘 命令 可 用 : 


。 UP - 移动 焦点 到 上 一 个 项 目 。 如 果 在 第 一 个 项 目 上 ， 则 移动 焦点 到 输入 (input) 。 如 果 
TAA (input) 上 ， 则 移动 焦点 到 最 后 一 个 项 目 。 

。 DOWN - 移动 焦点 到 下 一 个 项 目 。 如 果 在 最 后 一 个 项 目 上 ， 则 移动 焦点 到 输入 
(input) 。 如 果 在 输入 (input) 上 ， 则 移动 焦点 到 第 一 个 项 目 。 

e ESCAPE - 关闭 菜单 。 

e ENTER - 选择 当前 获得 焦点 的 项 目 ， 并 关闭 菜单 。 

。 TAB - 选择 当前 获得 焦点 的 项 目 ， 关 闭 菜单 ， 并 移动 焦点 到 下 一 个 可 聚焦 (focusable) 
的 元 素 。 


e PAGE UP/DOWN - 滚动 一 屏 的 项 目 ( 基 于 菜单 的 高 度 ) 。 
当 菜 单 关 闭 时 ， 下 面 的 键盘 命令 可 用 : 


e UP/DOWN - WIR HE minLength ， 则 打开 菜单 。 


主题 (Theming) 


自动 完成 部 件 (Autocomplete Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 自动 完成 部 件 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-autocomplete : 用 于 显示 匹配 用 PB 菜单 (menu) 
e ui-autocomplete-input : 自动 完成 部 件 (Autocomplete Widget) 实例 化 的 input 元 素 。 


依赖 (Dependencies) 


e Ul 核心 (UI Core) 

e 部 件 库 (Widget Factory) 
e 定位 (Position) 

e 菜单 部 件 (Menu Widget) 


其 他 注意 事项 : 


e 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改变 时 不 会 触发 原生 的 change 事 
件 。 


选项 


appendToType: Selector 
Default: null 


菜单 应 该 被 附加 到 哪 一 个 元 素 。 当 该 值 为 null 时 ， 输 入 域 的 父 元 素 将 检查 ui-front 
class, 如 果 找 到 带 有 ui-front class 的 元 素 ， 菜 单 将 被 附加 到 该 元 素 。 如 果 未 找到 带 有 
ui-front class 的 元 素 ， 不 管 值 为 多 少 ， 菜 单 将 被 附加 到 body. 


注意 : 当 建 议 菜单 打开 时 ， appendTo 选项 不 应 改变 。Code examples: 


初始 化 带 有 指定 appendro 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ appendTo: "#someElem" }); 


在 初始 化 后 ， 获 取 或 设置 appendto 选项 : 


// getter 
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" ); 


// setter 
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" ); 


autoFocusType: Boolean 


Default: false 如 果 设 置 为 true ， 当 菜单 显示 时 ， 第 一 个 条 目 将 自动 获得 焦点 。Code 
examples: 


初始 化 带 有 指定 autoFocus 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ autoFocus: true }); 


在 初始 化 后 ， 获 取 或 设置 autoFocus 选项 : 
// getter 
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" ); 


// setter 
$( ".selector" ).autocomplete( "option", "autoFocus", true ); 


delayType: Integer 


Default: 300 按键 和 执行 搜索 之 间 的 延迟 ， 以 毫秒 计 。 对 于 本 地 数据 ， 采 用 需 延 迟 是 有 意义 
的 (更 具 响 应 性 ) ， 但 对 于 远程 数据 会 产生 大 量 的 负荷 ， 同 时 降低 了 响应 性 。Code 
examples: 


初始 化 带 有 指定 delay 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ delay: 500 }); 


在 初始 化 后 ， 获 取 或 设置 delay 选项 : 
// getter 
var delay = $( ".selector" ).autocomplete( "option", "delay" ); 


// setter 
$( ".selector" ).autocomplete( "option", "delay", 500 ); 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 该 autocomplete. Code examples: 


初始 化 带 有 指定 disabled 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).autocomplete( "option", "disabled" ); 


// setter 
$( ".selector" ).autocomplete( "option", "disabled", true ); 


minLengthType: integer 


Default: 1 执行 搜索 前 用 户 必 须 输 入 的 最 小 字符 数 。 对 于 仅 带 有 几 项 条 目的 本 地 数据 ， 通 常 
设置 为 老 ， 但 是 当 单 个 字符 搜索 会 匹配 几 千 项 条 目 时 ， 设 置 个 高 数值 是 很 有 必要 的 。 Code 
examples: 


初始 化 带 有 指定 minLength 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ minLength: 0 }); 


在 初始 化 后 ， 获 取 或 设置 minLength 选项 : 


// getter 
var minLength = $( ".selector" ).autocomplete( "option", "minLength" ); 


// setter 
$( ".selector" ).autocomplete( "option", "minLength", 0 ); 


positionType: Object 


Default: { my: "left top", at: "left bottom", collision: "none" ) 标识 建议 菜单 的 位 置 与 
相关 的 input 元 素 有 关系 。 of 选项 默认 为 input 元 素 ， 但 是 您 可 以 指定 另 一 个 定位 元 素 。 如 
需 了 解 各 种 选项 的 更 多 细节 ， 请 查看 jQuery Ul Position, Code examples: 


初始 化 带 有 指定 position 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } }); 


在 初始 化 后 ， 获 取 或 设置 position 选项 : 
// getter 
var position = $( ".selector" ).autocomplete( "option", "position" ); 


// setter 
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right botto 
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sourceType: Array or String or Function( Object request, 
Function response( Object data ) ) 


Default: none ; 必须 指定 定义 要 使 用 的 数据 ， 必 须 指定 。 


独立 于 您 要 使 用 的 变量 ， 标 签 总 是 被 视 为 文本 。 如 果 您 想 要 标签 被 视 为 html， 您 可 以 使 用 
Scott González' html 扩展 。 演 示 侧 重 于 source 选项 的 不 同 变 量 - 您 可 以 查找 其 中 匹配 您 的 
使 用 情况 的 那个 ， 并 查看 相关 代码 。 


支持 多 个 类 型 : 


* Array : 可 用 于 本 地 数据 的 一 个 数组 。 支 持 两 种 格式 : 
Q 字符 串 数 组 : [ "Choicei", "Choice2" ] 
o 带 有 label 和 value 属性 的 对 象 数 
组 : [ { label: "Choicei", value: "valuei" }, ... ] label 属性 显示 在 建议 菜单 
中 。 当 用 户 选择 一 个 条 目 时 ，value 将 被 插入 到 input 元 素 中 。 如 果 只 是 指定 了 一 个 
属性 ， 则 该 属性 将 被 视 为 label 和 value， 例 如 ， 如 果 您 只 提供 了 value BIE, 
value 也 会 被 视 为 标签 。 
e String : 当 使 用 一 个 字符 串 ，Autocomplete 插件 希望 该 字符 串 指向 一 个 能 返回 JSON 数 
据 的 URL 资源 。 它 可 以 是 在 相同 的 主机 上 ， 也 可 以 是 在 不 同 的 主机 上 (必须 提供 
JSONP) 。Autocomplete 插件 不 过 滤 结 果 ， 而 是 通过 一 个 term 字段 添加 了 一 个 查询 
字符 串 ， 用 于 服务 器 端 脚本 过 滤 结果 。 人 例如， 如果 source 选项 设置 为 
"http://example.com" ， 且 用 户 键入 了 foo, GET 请 求 则 为 
http://example.com?term-foo o 数据 本 身 的 格式 可 以 与 前 面 描述 的 本 地 数据 的 格式 相 
同 。 
Function : 第 三 个 变量 ， 一 个 回调 函数 ， 提 供 最 大 的 灵活 性 ， 可 用 于 连接 任何 数据 源 到 
Autocomplete。 回 调 图 数 接受 两 个 参数 : 


o 一 个 request 对 象 ， 带 有 一 个 term 属性， 表示 当前 文本 输入 中 的 值 。 例 如 ， 如 果 
用 户 在 city 字段 输入 "new yo", W) Autocomplete term 等 同 于 "new yo" o 
o 一 个 response 回调 函数 ， 提 供 单个 参数 : 建议 给 用 户 的 数据 。 该 数据 应 基于 被 提 
供 的 term 进行 过 滤 ， 且 可 以 是 上 面 描述 的 本 地 数据 的 任何 格式 。 用 于 在 请 求 期 间 提 
供 自 定义 source 回调 来 处 理 错误 。 即 使 遇 到 错误 ， 您 也 必须 调用 response EAR 
数 。 这 就 确保 了 小 部 件 总 是 正确 的 状态 。 
当 过 滤 本 地 数据 时 ， 您 可 以 使 用 内 置 的 s.ui.autocomplete.escapeRegex WM, CRE 
一 个 字符 串 参 数 ， 转 义 所 有 的 正则 表达 式 字 符 ， 让 结果 安全 地 传递 到 new RegExp() 。 


Code examples: 


初始 化 带 有 指定 source 选项 的 autocomplete : 


$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript 





在 初始 化 后 ， 获 取 或 设置 source 选项 : 


// getter 
var source = $( ".selector" ).autocomplete( "option", "source" ); 


// setter 
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", 
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Methods 


close()Returns: jQuery (plugin only) 

关闭 Autocomplete 3€ &, 345 search 方法 结合 使 用 时 ， 可 用 于 关闭 打开 的 菜单 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 close 方法 : 


$( ".selector" ).autocomplete( "close" ) 


destroy()Returns: jQuery (plugin only) 

完全 移 除 autocomplete 功能 。 这 会 把 元 素 返 回 到 它 的 预 初 始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 destroy 方法 : 


$( ".selector" ).autocomplete( "destroy" ) 


disable()Returns: jQuery (plugin only) 


禁用 autocomplete. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).autocomplete( "disable" ); 


enable()Returns: jQuery (plugin only) 
启用 autocomplete. 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).autocomplete( "enable" ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionname 关联 的 值 。 

。 optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 autocomplete 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).autocomplete( "option" ) 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 autocomplete 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).autocomplete( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 autocomplete 设置 一 个 或 多 个 选项 。 
e optionsType: Object 要 设置 的 option-value xt. 
Code examples: 
调用 该 方法 : 


$( ".selector" ).autocomplete( "option", { disabled: true } ); 


search( [value ] )Returns: jQuery (plugin only) 


触发 search 事件 ， 如 果 该 事件 未 被 取消 则 调用 数据 源 。 当 被 点 击 时 ， 可 被 类 似 选择 框 按钮 
用 来 打开 建议 。 当 不 带 参 数 调用 该 方法 时 ， 则 使 用 当前 输入 的 值 。 可 带 一 个 空 字符 串 和 
minLength: 0 进行 调用 ， 来 显示 所 有 的 条 目 。 


e valueType: String 
Code examples: 


调用 search 方法 : 


$( ".selector" ).autocomplete( "search", "" ); 


widget()Returns: jQuery 


返回 一 个 包含 菜单 元 素 的 jQuery 对 象 。 虽 然 菜单 项 不 断 地 被 创建 和 销毁 。 菜 单元 素 本 身 会 
在 初始 化 时 创建 ， 并 不 断 的 重复 使 用 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 widget 方法 : 


$( ".selector" ).autocomplete( "widget" ); 


Extension Points 


自动 完成 部 件 (Autocomplete Widget) 通过 部 件 库 (Widget Factory) 创建 的 ， 且 可 被 扩 
展 。 当 对 部 件 进 行 扩展 时 ， 您 可 以 重 载 或 者 添加 扩展 部 件 的 行为 。 下 面 提供 的 方法 作为 扩展 
点 ， 与 上 面 列 出 的 插件 方法 具有 相同 的 API 稳定 性 。 如 需 了 解 更 多 有 关 小 部 件 扩展 的 知识 ， 
请 查看 通过 部 件 库 (Widget Factory) 扩展 小 部 件 。 


_renderltem( ul, item )Returns: jQuery 

控制 在 部 件 菜单 中 每 个 选项 的 创建 的 格式 化 方法 该 方法 必须 创建 一 个 新 的 &lt;li&gt; 元 素 ， 
追加 到 菜单 中 ， 并 返回 它 。 

注意 : 为 了 与 menu 小 部 件 兼容 ， 这 时 创建 的 &1t;ul&gt; 元 素 必须 包含 一 个 &lt;a&gt; 元素 。 


请 看 下 面 的 例子 。 


e ulType: jQuery 新 创建 的 alt;liagt; 元 素 必须 追加 到 的 &1t;ul&gt; 元 素 。 
e itemType: Object 

o labelType: String 条 目 显 示 的 字符 串 。 

o valueType: String 当 条 目 被 选中 时 插入 到 输入 框 中 的 值 。 


Code examples: 


添加 条 目的 值 作为 &lt;li&gt; 上 的 data 属性 。 


.renderItem: function( ul, item ) { 
return $( "«li»" ) 
.attr( "data-value", item.value ) 
.append( $( "«a»" ).text( item.label ) ) 
.appendTo( ul ); 


_renderMenu( ul, items )Returns: jQuery (plugin only) 


控制 建立 部 件 菜单 的 方法 。 该 方法 传递 一 个 空 up 和 [匹配 用 户 输入 的 术语 的 项 目 数组 。 创 
建 当 个 的 <li> 元 素 应 该 委派 给 _renderItemData() o 


。 ulType: jQuery 一 个 要 作为 小 部 件 的 菜单 使 用 的 空 的 &1t;ulggt; 元 素 。 
e itemsType: Array 一 个 数组 ， 数 组 元 素 为 匹配 用 户 输入 的 条 目 。 每 个 条 目 是 一 个 带 有 
label 和 value 属性 的 对 象 。 


Code examples: 


添加 一 个 CSS class 名 称 到 旧 的 菜单 项 。 


_renderMenu: function( ul, items ) { 
var that = this; 
$.each( items, function( index, item ) { 
that._renderItemData( ul, item ); 


}); 
$( ul ).find( "li:odd" ).addClass( "odd" ); 
} 


thod-_resizeMenu"> 


_resizeMenu()Returns: jQuery (plugin only) 

该 方法 负责 在 菜单 显示 前 调整 菜单 尺寸 。 菜 单元 素 可 通过 this.menu.element 使 用 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


菜单 总 是 显示 为 500 像素 宽 。 


_resizeMenu: function() { 
this.menu.element.outerWidth( 500 ); 


} 


ction id="events"> 


Events 


change( event, ui )Type: autocompletechange 


如 果 输 入 域 的 值 改变 则 触发 该 事件 。 


e eventType: Event 
e uiType: Object 
o itemType: Object 从 菜单 中 选择 的 条 目 ， 否 则 属性 为 null 。 


Code examples: 


初始 化 带 有 指定 change 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
change: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 autocompletechange 事件 : 


$( ".selector" ).on( "autocompletechange", function( event, ui ) {} ); 


close( event, ui )Type: autocompleteclose 


当 菜 单 隐藏 时 触发 。 不 是 每 一 个 close 事件 都 伴随 着 change 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 close 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
close: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 autocompleteclose 事件 : 


$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} ); 


create( event, ui )Type: autocompletecreate 


当 创建 autocomplete 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
create: function( event, ui ) (3 


J); 


绑 定 一 个 事件 监听 器 到 autocompletecreate 事件 : 


$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} ); 


focus( event, ui )Type: autocompletefocus 


当 焦 点 移动 到 一 个 条 目 上 (未 选择 ) 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 蔡 换 为 获得 焦点 
的 条 目的 值 ， 即 使 该 事件 是 通过 键 瘟 交互 触发 的 。 


取消 该 事件 会 阻止 值 被 更 新 ， 但 不 会 阻止 菜单 项 获得 焦点 。 


e eventType: Event 
e uiType: Object 
o itemType: Object 获得 焦点 的 条 目 。 


Code examples: 


初始 化 带 有 指定 focus 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
focus: function( event, ui ) {} 


1) 


绑 定 一 个 事件 监听 器 到 autocompletefocus 事件 : 


$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} ); 


open( event, ui )Type: autocompleteopen 
当 打开 建议 菜单 或 者 更 新 建议 菜单 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 open 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
open: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 autocompleteopen 事件 : 


$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} ); 


response( event, ui )Type: autocompleteresponse 


在 搜索 完成 后 菜单 显示 前 触发 。 用 于 建议 数据 的 本 地 操作 ， 其 中 自 定义 的 source 选项 回调 
不 是 必需 的 。 该 事件 总 是 在 搜索 完成 时 触发 ， 如 果 搜 索 无 结果 或 者 禁用 了 Autocomplete, 5 
致 菜单 未 显示 ， 该 事件 一 样 会 被 触发 。 


e eventType: Event 


e uilype: Object 
o contentType: Array 包 含 响 应 数据 ， 且 可 被 修改 来 改变 显示 结果 。 该 数据 已 经 标准 
化 ， 所 以 如 果 您 要 修改 数据 ， 请 确保 每 个 条 目 都 包含 value 和 label 属性 。 


Code examples: 


初始 化 带 有 指定 response 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
response: function( event, ui ) {} 


, 


绑 定 一 个 事件 监听 器 到 autocompleteresponse 事件 : 


$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} ); 


search( event, ui )Type: autocompletesearch 


在 搜索 执行 前 满足 minLength 和 delay 后 触发 。 如 果 取 消 该 事件 ， 则 不 会 提交 请 求 ， 也 不 会 
提供 建议 条 目 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 search 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
search: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 autocompletesearch 事件 : 


$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} ); 


select( event, ui )Type: autocompleteselect 
当 从 菜单 中 选择 条 目 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 蔡 换 为 被 选中 的 条 目的 值 。 
取消 该 事件 会 阻止 值 被 更 新 ， 但 不 会 阻止 菜单 关闭 。 


e eventType: Event 
e uiType: Object 


o itemType: ObjectAn Object with label and value properties for the selected 
option. 


Code examples: 


初始 化 带 有 指定 select 回调 的 autocomplete : 


$( ".selector" ).autocomplete({ 
select: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 autocompleteselect 事件 : 


$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} ); 


Examples: 


Example: 一 个 简单 的 jQuery Ul 自动 完成 (Autocomplete) 。 


<!doctype html» 
«html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>autocomplete demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script srcz"//code.jquery.com/ui/1.10.4/jquery-ui.js"»«/script» 
</head> 
<body> 


«label for="autocomplete">Select a programming language: </label> 
<input id="autocomplete"> 


<script> 
$( "#autocomplete" ).autocomplete({ 

source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] 
1) 


</script> 


</body> 
</html> 





Example: Using a custom source callback to match only the beginning of 
terms 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>autocomplete demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<label for="autocomplete">Select a programming language: </label> 
<input id="autocomplete"> 


<script> 
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]; 
$( "#autocomplete" ).autocomplete({ 
source: function( request, response ) { 
var matcher = new RegExp( "A" + $.ui.autocomplete.escapeRegex( request.term ), 
response( $.grep( tags, function( item )f{ 
return matcher.test( item ); 


HA 
} 
3); 


</script> 


</body> 
</html> 
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Button Widget 


Categories: Widgets 


version added: 1.8 


Description: 可 主题 化 的 按钮 和 按钮 集合 。 


QuickNavExamples 


Options 


e disabled 
e icons 

e label 

e text 


Methods 


e destroy 
e disable 
e enable 
e option 

e refresh 
e widget 


Events 


e create 


按钮 部 件 (Button Widget) 加 强 了 标准 表单 元 素 的 功能 ， 比 如 按钮 (button) 、 输 入 
(input) 、 锚 (anchor) ， 用 适当 的 甚 停 (hover) 和 激活 (active) 样式 来 主题 化 按钮 。 


除了 基本 的 按钮 ， 单 选 按钮 和 复 选 框 (input 类 型 为 radio 和 checkbox) 也 可 以 转换 为 按钮 。 
相关 的 标签 (label) 设计 成 按钮 的 样式 ， 点 击 时 更 新 底层 的 输入 。 为 了 能 正常 工作 ， 需 要 给 
input 一 个 id 属性 ， 并 指向 标签 (label) 的 for 属性 。 不 要 把 input 放 在 标签 (label) 

， 否则 会 引起 可 访问 性 问题 。 


为 了 分 组 单 选 按钮 ，Button 也 提供 了 一 个 额外 的 小 部 件 ， 名 为 Buttonset。Buttonset 通过 选 
择 一 个 容器 元 素 (包含 单 选 按钮 ) 并 调用 .buttonset() 来 使 用 。Buttonset 也 提供 了 可 视 化 
分 组 ， 因 此 当 有 一 组 按钮 时 都 可 考虑 使 用 它 。 它 会 选择 所 有 的 后 代 ， 并 对 它们 应 用 

.button() 。 您 可 以 启用 和 禁用 一 个 按钮 集 ， 这 将 会 启用 和 禁用 所 有 包含 的 按钮 。 销毁 按 钮 集 
会 调用 每 个 按钮 的 destroy 方法 。 对 于 分 组 的 单 选 按钮 和 复 选 框 按钮 ， 推 荐 使 用 带 有 
legend 的 fieldset 来 提供 一 个 可 访问 的 分 组 标签 。 


当 使 用 一 个 类 型 为 button, submit 或 reset 的 input 时 ， 仅 限于 支持 纯 文本 无 图 标 标签 。 


主题 
按钮 部 件 (Button Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 
要 使 用 按钮 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-button : 表示 按钮 的 DOM 元 素 。 该 元 素 会 根据 text 和 icons 选项 添加 下 列 class 之 
— : Ui-button-text-only 、  ui-button-icon-only 、  ui-button-icons-only 、  ui-button-t 
o ui-button-icon-primary : 用 于 显示 按钮 主要 图 标的 元 素 。 只 有 当主 要 图 标 在 icons 
选项 中 提供 时 才 呈 现 。 
© ui-button-text : 在 按钮 的 文本 内 容 周转 的 容器 。 
© ui-button-icon-secondary : 用 于 显示 按钮 的 次 要 图 标 。 只 有 当 次 要 图 标 在 icons 选 
项 中 提供 时 才 呈 现 。 
e ui-buttonset : Buttonset 的 外 层 容 器 。 


依赖 


e UI 核心 (UI Core) 
e 部 件 库 (Widget Factory) 


其 他 注意 事项 : 
e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


Options 


disabledType: Boolean 
Default: false 如 果 设 置 为 true ， 则 禁用 该 button。Code examples: 


初始 化 带 有 指定 disabled 选项 的 button : 


$( ".selector" ).button({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).button( "option", "disabled" ); 


// setter 
$( ".selector" ).button( "option", "disabled", true ); 


iconsType: Object 
Default: | primary: null, secondary: null } 


要 显示 的 图 标 ， 包 括 带 有 文本 的 图 标 和 不 带 有 文本 的 图 标 (查看 text 选项 ) 。 默 认 情 况 下 
， 主 图 标 显 示 在 标签 文本 的 左边 ， 副 图 标 显 示 在 右边 。 显 示 位 置 可 通过 CSS 进行 控制 。 


primary 和 secondary 属性 值 必须 是 图 标 class 名 称 ， 例 如 ， "ui-icon-gear" 。 如 果 只 使 
用 一 个 图 标 ， 则 icons: { primary: "ui-icon-locked" } 。 如 果 使 用 两 个 图 标 ， 则 


icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } o 
Code examples: 
初始 化 带 有 指定 icons 选项 的 button : 

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle- 
H— — —MH————M— É—À—]; 


在 初始 化 后 ， 获 取 或 设置 icons 选项 : 





// getter 
var icons = $( ".selector" ).button( "option", "icons" ); 


// setter 
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-ico 


EJE) 





labelType: String 


Default: null 要 显示 在 按钮 中 的 文本 。 当 未 指定 时 (null) ， 则 使 用 元 素 的 HTML 内 容 ， 
或 者 如 果 元 素 是 一 个 submit 或 reset 类 型 的 input 元 素 ， 则 使 用 它 的 value 属性 ， 或 者 如 果 
元 素 是 一 个 radio 或 checkbox 类 型 的 input 元 素 ， 则 使 用 相关 的 label 元 素 的 HTML 内 

容 。Code examples: 


初始 化 带 有 指定 label 选项 的 button : 


$( ".selector" ).button({ label: "custom label" }); 


在 初始 化 后 ， 获 取 或 设置 label 选项 : 
// getter 
var label = $( ".selector" ).button( "option", "label" ); 


// setter 
$( ".selector" ).button( "option", "label", "custom label" ); 


textType: Boolean 


Default: true 是 否 显示 标签 。 当 设置 为 false 时 ， 不 显示 文本 ， 但 是 此 时 必须 启用 icons 
选项 ， 否 则 text 选项 将 被 忽略 。Code examples: 


初始 化 带 有 指定 text 选项 的 button: 


$( ".selector" ).button({ text: false }); 


在 初始 化 后 ， 获 取 或 设置 text 选项 : 
// getter 
var text = $( ".selector" ).button( "option", "text" ); 


// setter 
$( ".selector" ).button( "option", "text", false ); 


Methods 


destroy()Returns: jQuery (plugin only) 

完全 移 除 button 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).button( "destroy" ); 


disable()Returns: jQuery (plugin only) 


禁用 button. 


。 该 方法 不 接受 任何 参数 。 
Code examples: 
调用 disable 方法 : 


$( ".selector" ).button( "disable" ); 


enable()Returns: jQuery (plugin only) 


启用 button, 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).button( "enable" ); 


option( optionName )Returns: Object 


获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).button( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 button 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 该 方法 : 


var options = $( ".selector" ).button( "option" ) 


option( optionName, value )Returns: jQuery (plugin only) 


设置 与 指定 的 optionName 关联 的 button 选项 的 值 。 


。 optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).button( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 button 设置 一 个 或 多 个 选项 。 
e optionsType: Object 要 设置 的 option-value xt. 
Code examples: 
调用 该 方法 : 


$( ".selector" ).button( "option", { disabled: true } ); 


refresh()Returns: jQuery (plugin only) 


刷新 按钮 的 视觉 状态 。 用 于 在 以 编程 方式 改变 原生 元 素 的 选中 状态 或 禁用 状态 后 更 新 按钮 状 


A 


e 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 refresh 方法 : 


$( ".selector" ).button( "refresh" ); 


widget()Returns: jQuery 

返回 一 个 包含 button 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).button( "widget" ); 


Events 


create( event, ui )Type: buttoncreate 


当 创 建 按钮 button 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 button 


$( ".selector" ).button({ 
create: function( event, ui ) (3 


Hi; 


绑 定 一 个 事件 监听 器 到 buttoncreate 事件 : 


$( ".selector" ).on( "buttoncreate", function( event, ui ) {} ); 


Examples: 
Example: 一 个 简单 的 jQuery Ul #42 (Button) 。 


<!doctype html» 
<html lang="en"> 
<head> 
«meta charset="utf-8"> 
<title>button demo</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<button>Button label</button> 
<script> 
$( "button" ).button(); 


</script> 


</body> 
</html> 








Example: 一 个 简单 的 jQuery Ul 按钮 集 (Buttonset) 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>button demo</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<form> 
<fieldset> 
<legend>Favorite jQuery Project</legend> 
<div id="radio"> 
<input type="radio" id="sizzle" name="project"> 
«label for="sizzle">Sizzle</label> 


<input type="radio" id="qunit" name="project" checked="checked"> 
«label for="qunit">QUnit</label> 


<input type="radio" id="color" name="project"> 
<label for="color">Color</label> 
</div> 
</fieldset> 
</form> 


<script> 
$( "#radio" ).buttonset(); 
</script> 


</body> 
</html> 
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Datepicker Widget 


Categories: Widgets 


version added: 1.0 


Description: 从 弹出 框 或 内 联 日 历 选择 一 个 日 期 。 


QuickNavExamples 


Options 


altField 

e altFormat 

e appendText 

e autoSize 

e beforeShow 

e beforeShowDay 
e buttonlmage 

e buttonlmageOnly 
e buttonText 

e calculateWeek 
e changeMonth 

e changeYear 

e closeText 

e constrainInput 
e currentText 

e dateFormat 

e dayNames 

e dayNamesMin 
e dayNamesShort 
e defaultDate 

e duration 

e firstDay 

e gotoCurrent 

e hidelfNoPrevNext 
e isRTL 
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e maxDate 

e minDate 

e monthNames 

e monthNamesShort 
e navigationAsDateFormat 
e nextText 

e numberOfMonths 

e onChangeMonthYear 
e onClose 

e onSelect 

e prevText 

e selectOtherMonths 
e shortYearCutoff 

e showAnim 

e showButtonPanel 

e showCurrentAtPos 
e showMonthAfterYear 
e showOn 

e showOptions 

e showOtherMonths 

e showWeek 

e stepMonths 

e weekHeader 

e yearRange 

e yearSuffix 


Methods 


e destroy 

e dialog 

e getDate 
e hide 

e isDisabled 
e option 

e refresh 

e setDate 
e show 

e widget 


Events 


Datepicker Widget 240 


jQuery UI 日 期 选择 器 (Datepicker) 是 向 页 面 添 加 日 期 选择 功能 的 高 度 可 配置 插件 。 您 可 以 
自 定义 日 期 格式 和 语言 ， 限 制 可 选择 的 日 期 范围 ， 添 加 按钮 和 其 他 导航 选项 。 


默认 情况 下 ， 当 相关 的 文本 域 获得 焦点 时 ， 在 一 个 小 的 覆盖 层 打 开 日 期 选择 器 。 对 于 一 个 内 
联 的 日 历 ， 只 需 简单 地 将 日 期 选择 器 附加 到 div 或 者 span 上 。 


EA 
当日 期 选择 器 打开 时 ， 下 面 的 键盘 命令 可 用 : 


e PAGE UP: 移 到 上 一 个 月 。 

e PAGE DOWN : 移 到 下 一 个 月 。 

。 CTRL+PAGE UP : 移 到 上 一 年 。 

。 CTRL+PAGE DOWN : 移 到 下 一 年 。 

。 CTRL+HOME : 移 到 当前 月 份 。 如 果 日 期 选择 器 是 关闭 的 则 打开 。 
。 CTRL+LEFT : 移 到 上 一 天 。 

e CTRL+RIGHT : 移 到 下 一 天 。 

。 CTRL+UP : 移 到 上 一 周 。 

。 CTRL+DOWN : 移 到 下 一 周 。 

。 ENTER : 选择 聚焦 的 日 期 。 
CTRL+END : 关闭 日 期 选择 器 ， 并 清除 日 期 。 
e ESCAPE : 关闭 日 期 选择 器 ， 不 做 任何 选择 。 


实用 功能 

$.datepicker.setDefaults( settings ) 

为 所 有 的 日 期 选择 器 改变 默认 设置 。 

使 用 option() 方法 来 改变 个 别 实例 的 设置 。 

Code examples: 

设置 所 有 的 日 期 选择 器 在 获得 焦点 时 或 点 击 图 标 时 打开 。 


$.datepicker.setDefaults({ 
showOn: "both", 
buttonImageOnly: true, 
buttonImage: "calendar.gif", 

buttonText: "Calendar" 


1 


设置 所 有 的 日 期 选择 器 都 有 法 语文 本 。 


$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); 


$.datepicker.formatDate( format, date, settings ) 
格式 化 日 期 为 一 个 带 有 指定 格式 的 字符 串 值 。 
格式 可 以 是 下 列 组 合 : 


e d -一 月 中 的 第 几 天 CRAR SS) 

e dd - 一 月 中 的 第 几 天 (两 位 数 ) 

e 0 -一 年 中 的 第 几 天 (没有 前 导 震 ) 

e 00 - 一 年 中 的 第 几 天 (三 位 数 ) 

e D - 天 的 短 名 称 

。 DD - 天 的 长 名 称 

e m- 一 年 中 的 第 几 月 CAR SS) 

e mm - 一 年 中 的 第 几 月 〈 两 位 数 ) 

。 M- 月 的 短 名 称 

。 MM - 月 的 长 名 称 

。y- 年 (两 位 数 ) 

e yy -年 (四 位 数 ) 

© @ - Unix 时 间 稚 (ms since 01/01/1970) 
e |- Windows 钟表 (100ns since 01/01/0001) 
。'..' -文本 

。"- 单 引号 

。 其 他 - 文本 


也 有 一 些 $.datepicker 预定 义 的 标准 日 期 格式 : 


e ATOM - 'yy-mm-dd' (4 RFC 3339/ISO 8601 相同 ) 
e COOKIE - 'D, dd M yy' 

e |SO 8601 - 'yy-mm-dd' 

e RFC_822-'D,dMy' (参照 RFC 822) 

e RFC_850 -'DD, dd-M-y' (参照 RFC 850) 
e RFC_1036-'D,dMy' (参照 RFC 1036) 
e RFC 1123-'D, d Myy (参照 RFC 1123) 
e RFC 2822-'D, d M yy' (参照 RFC 2822) 
e RSS-'D,dMy' (与 RFC 822 相同 ) 

e TICKS-" 

e TIMESTAMP - '@' 

e W3C -'yy-mm-dd' (4 ISO 8601 相同 ) 


Code examples: 


以 ISO 格式 显示 日 期 。 产 生 "2007-01-26". 


$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) ); 


以 扩展 法 语 格式 显示 日 期 。 产 生 "Samedi, Juillet 14, 2007". 


$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), { 


dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, 
dayNames: $.datepicker.regional[ "fr" ].dayNames, 
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, 
monthNames: $.datepicker.regional[ "fr" ].monthNames 


3); 


$.datepicker.parseDate( format, value, settings ) 


从 一 个 指定 格式 的 字符 串 值 中 提取 日 期 。 
格式 可 以 是 下 列 组 合 : 
。d -一 月 中 的 第 几 天 CRABS) 
e dd - 一 月 中 的 第 几 天 (两 位 数 ) 
e 0 -一 年 中 的 第 几 天 (没有 前 导 需 ) 
e 00 - 一 年 中 的 第 几 天 (三 位 数 ) 
。 D - 星期 几 的 短 名 称 
。 DD - 星期 几 的 长 名 称 
e m- 一 年 中 的 第 几 月 CZAR SS) 
e mm - 一 年 中 的 第 几 月 〈 两 位 数 ) 
。 M- 月 的 短 名 称 
。 MM - 月 的 长 名 称 
。y- 年 (两 位 数 ) 
e yy - (MAZ) 
© @ Unix 时间 惟 (ms since 01/01/1970) 
e |- Windows 钟表 (100ns since 01/01/0001) 
。'..' -文本 
。"- 单 引号 
e 其 他 - 文本 
一 些 可 能 被 抛 出 的 异常 : 


‘Invalid arguments' - 如 果 格 式 或 值 为 空 则 抛 出 此 异常 。 

‘Missing number at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 数值 则 抛 出 此 异常 。 
‘Unknown name at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 星期 几 名 称 或 月 份 名 称 则 抛 
出 此 异常 。 

'Unexpected literal at position nn' - 如 果 格 式 显 示 一 个 未 找到 的 文本 值 则 抛 出 此 异常 。 
‘Invalid date' - 如 果 日 期 无 效 则 抛 出 此 异常 ， 比 如 '31/02/2007'. 


Code examples: 


提取 一 个 ISO 格式 的 日 期 。 


$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" ); 


提取 一 个 扩展 法 语 格式 的 日 期 。 


$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", { 
shortYearCuroff: 20, 
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, 
dayNames: $.datepicker.regional[ "fr" ].dayNames, 
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, 
monthNames: $.datepicker.regional[ "fr" ].monthNames 


3) 


$.datepicker.iso8601Week( date ) 
确定 一 个 给 定 的 日 期 在 一 年 中 的 第 几 周 1 到 53. 


该 图 数 使 用 ISO 8601 定义 一 周 : 一 周 从 星期 一 开始 ， 每 一 年 的 第 一 周 包含 1 月 4 日 。 这 意 
味 着 上 一 年 至 多 有 三 天 可 能 包含 在 当年 的 第 一 周 中 ， 当 年 至 多 有 三 天 可 能 包含 在 上 一 年 的 最 
后 一 周 中 。 


该 函数 是 calculateweek 选项 的 默认 实现 。 
Code examples: 


查找 日 期 在 一 年 中 的 第 几 周 。 


$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) ); 


$.datepicker.noWeekends 
设置 如 beforeShowDay WAL, B5 1E 3e 3€ FS] v. 


我 们 可 以 在 beforeshowpay 选项 中 提供 noweekends() WAX, FH3kiFERHUBITFH, ze- 
个 true/false 值 的 数组 ， 用 来 指示 日 期 是 否 可 选择 。 


Code examples: 


设置 DatePicker， 让 周末 不 可 选 。 


$( "#datepicker" ).datepicker(( 
beforeShowDay: $.datepicker.noWeekends 


3); 


局 限 


日 期 选择 器 提供 了 迎合 不 同 的 语言 和 日 期 格式 本 地 化 内 容 的 支持 。 每 个 本 地 化 包含 在 名 称 后 
追加 语言 代码 的 文件 中 ， 例 如 法 语 为 jquery.ui.datepicker-fr.js 。 所 需 的 本 地 化 文件 需要 包 
含 在 主要 的 日 期 选择 器 代码 后 面 。 每 个 本 地 化 文件 添加 了 它 自己 的 设置 到 可 用 的 本 地 化 集合 
中 ， 所 有 实例 自动 应 用 这 些 设置 为 默认 设置 。 


$.datepicker.regional 属性 保存 了 一 个 本 地 化 数组 ， 以 语言 代码 作为 前 置 ， 上 默认 前 置 为 
"" ， 表 示 英 语 。 每 个 条 目 是 一 个 带 有 下 列 属性 的 对 象 : closeText 、 prevText 、 
nextText 、 currentText 、 monthNames 、 monthNamesShort 、 dayNames 、 
dayNamesShort 、 dayNamesMin 、 weekHeader 、 dateFormat 、 firstDay 、 isRTL 、 


showMonthAfterYear 和 yearSuffix o 


您 可 以 通过 下 面 代 码 恢复 默认 的 本 地 化 : 


$.datepicker.setDefaults( $.datepicker.regional[ "" ] ); 


您 可 以 通过 下 面 代码 覆盖 一 个 特定 地 点 的 日 期 选择 器 : 


$( selector ).datepicker( $.datepicker.regional[ "fr" ] ); 


主题 


日 期 选择 器 部 件 (Datepicker Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 日 期 选择 器 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-datepicker : 日 期 选择 器 的 外 层 容器 。 如 果 日 期 选择 器 是 内 联 的 ， 该 元 素 会 另外 带 有 
一 个 ui-datepicker-inline class。 如 果 设 置 了 isRTL 选项 ， 该 元 素 会 另外 带 有 一 个 
ui-datepicker-rtl class, 
©  ui-datepicker-header : 日 期 选择 器 的 头 部 容器 。 

m ui-datepicker-prev : 用 于 选择 上 一 月 的 控件 。 
W ui-datepicker-next : 用 于 选择 下 一 月 的 控件 。 
m ui-datepicker-title :日 期 选择 器 包含 月 和 年 的 标题 容器 。 
m ui-datepicker-month : 月 的 文本 显示 ， 如 果 设 置 了 changeMonth 选项 则 显 
ZR &lt;select&gt; 元 素 。 
m ui-datepicker-year : 年 的 文本 显示 ， 如 果 设 置 了 changeYear 选项 则 显示 
&lt;select&gt; 元 素 。 
o  ui-datepicker-calendar : 包含 日 历 的 表格 。 
m ui-datepicker-week-end : 周末 的 单元 格 。: Cells containing weekend days. 
m ui-datepicker-other-month : 发 生 在 某 月 但 不 是 当前 月 天 数 的 单元 格 。 
W  ui-datepicker-unselectable : 用 户 不 可 选择 的 单元 格 。 
W  ui-datepicker-current-day : 已 选中 日 期 的 单元 格 。 
W  ui-datepicker-today : 当天 日 期 的 单元 格 。 
© ui-datepicker-buttonpane : 当 设 置 showButtonPanel 选项 时 使 用 按钮 面板 
(buttonpane) 。 
W ui-datepicker-current : 用 于 选择 当天 日 期 的 按钮 。 


如 果 numberofMonths 选项 用 于 显示 多 个 月 份 ， 则 使 用 一 些 额外 的 class : 


e ui-datepicker-multi : 一 个 多 月 份 日 期 选择 器 的 最 外 层 容器 。 该 元 素 会 根据 要 显示 的 月 
份 个 数 另 外 带 有 ui-datepicker-multi-2 、  ui-datepicker-multi-3 或 
ui-datepicker-multi-4 Class 名 称 。 

o ui-datepicker-group : 分 组 内 单独 的 选择 器 。 该 元 素 会 根据 它 在 分 组 中 的 位 置 另 外 
带 有 ui-datepicker-group-first 、  ui-datepicker-group-middle 或 
ui-datepicker-group-last Class 名 称 。 


依赖 


e Ul 核心 (UI Core) 
e 特效 核心 (Effects Core) (PRJ ; 4S showanim 选项 一 起 使 用 时 ) 


其 他 注意 事项 : 


。 该 部 件 要 求 一 些 功 能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改 变 时 不 会 触发 原生 的 change 事 
件 。 

. 不 支持 在 &lt;input type="date"&gt; 上 创建 日 期 选择 器 ， 因为 会 造成 与 本 地 选择 器 的 
Ul 冲突 。 


Options 


altFieldType: Selector or jQuery or Element 


Default: "" 一 个 input 元 素 ， 使 用 选择 器 选择 的 另 一 个 地 方 更 新 datepicker 选 择 的 日 期 . 使 用 
altFormat 指定 的 这 一 区 域 设 置 如 下 改变 格式 的 日 期 (使 用 input 最 直观 ). 如 果 没 有 代替 的 区 域 
则 使 用 空白 .Code examples: 


初始 化 带 有 指定 altrield 选项 的 datepicker : 


$( ".selector" ).datepicker({ altField: "#actualDate" }); 


在 初始 化 后 ， 获 取 或 设置 altField 选项 : 


// getter 
var altField = $( ".selector" ).datepicker( "option", "altField" ); 


// setter 
$( ".selector" ).datepicker( "option", "altField", "#actualDate" ); 


altFormatType: String 


Default: "" dateFormat 被 altField 项 所 使 用 。 它 的 目的 是 允许 选择 一 种 日 期 格式 显示 给 
用 户 以 供 选择 ， 而 实际 的 格式 则 是 来 自 后 台 。 对 于 可 能 的 格式 的 完整 列表 ， 请 参阅 
formatDate Æt. Code examples: 


初始 化 带 有 指定 altFormat 选项 的 datepicker : 


$( ".selector" ).datepicker({ altFormat: "yy-mm-dd" }); 


在 初始 化 后 ， 获 取 或 设置 altFormat 选项 : 
// getter 
var altFormat = $( ".selector" ).datepicker( "option", "altFormat" ); 


// setter 
$( ".selector" ).datepicker( "option", "altFormat", "yy-mm-dd" ); 


appendTextType: String 


Default: "" 显示 每 个 日 期 字段 后 面 的 文本 ， 例如 ， 以 显示 所 需 的 格式 。Code examples: 


初始 化 带 有 指定 appendrext 选项 的 datepicker : 


$( ".selector" ).datepicker({ appendText: "(yyyy-mm-dd)" }); 


在 初始 化 后 ， 获 取 或 设置 appendText 选项 : 
// getter 
var appendText = $( ".selector" ).datepicker( "option", "appendText" ); 


// setter 
$( ".selector" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" ); 


autoSizeType: Boolean 


Default: raise 如 果 设置 为 crue ， 将 自动 调整 输入 字段 ， 以 适应 日 期 在 当前 
的 dateFormat 。Code examples: 


初始 化 带 有 指定 autosize 选项 的 datepicker : 


$( ".selector" ).datepicker({ autoSize: true }); 


在 初始 化 后 ， 获 取 或 设置 autosize 选项 : 


// getter 
var autoSize = $( ".selector" ).datepicker( "option", "autoSize" ); 


// setter 
$( ".selector" ).datepicker( "option", "autoSize", true ); 


beforeShowType: Function( Element input, Object inst ) 
Default: null 一 个 函数 ， 它 接受 一 个 输入 字段 和 当前 的 datepicker 实 例 ， 并 返回 一 个 选项 对 
象 来 修改 datepicker。 只 在 datepicker 显 示 之 前 被 调用 。 

beforeShowDayType: Function( Date date ) 

Default: null 一 个 函数 ， 它 接受 一 个 日 期 作为 参数 并 且 必须 返回 一 个 数组 : 


e [0] : true / false 表示 这 个 日 期 是 否 可 选 
。 [1] : 一 个 CSS class 名 添加 到 日 期 的 单元 格 或 默认 描述 为 n 
e [2] :一 个 可 选 的 日 期 弹出 提示 


该 函数 在 datepicker 每 一 天 显示 之 前 被 调用 。 


buttonlmageType: String 


Default: "" 34 showon 选项 设置 为 "button" EX "both" Hj, 用 于 显示 datepicker 的 图 片 url 地 
址 。 如 果 设 置 ， buttonText 选项 将 成 为 alt 值 ， 而 不 是 直接 显示 。Code examples: 


初始 化 带 有 指定 buttonImage 选项 的 datepicker : 


$( ".selector" ).datepicker({ buttonImage: "/images/datepicker.gif" }); 


在 初始 化 后 ， 获 取 或 设置 buttonImage 选项 : 


// getter 

var buttonImage = $( ".selector" ).datepicker( "option", "buttonImage" ); 

// setter 

$( ".selector" ).datepicker( "option", "buttonImage", "/images/datepicker.gif" ); 


buttonlmageOnlyType: Boolean 


Default: false 无 论 是 按钮 AR 必须 自行 提供 而 不 是 里 面 一 个 按钮 元 素 。 此 选项 仅 
当 buttonImage 选项 也 被 设置 时 才 起 作用 。Code examples: 


初始 化 带 有 指定 buttonImageonly 选项 的 datepicker : 


$( ".selector" ).datepicker({ buttonImageOnly: true }); 


在 初始 化 后 ， 获 取 或 设置 buttonImageonly 选项 : 


// getter 
var buttonImageOnly = $( ".selector" ).datepicker( "option", "buttonImageOnly" ); 


// setter 
$( ".selector" ).datepicker( "option", "buttonImageOnly", true ); 


buttonTextType: String 


Default: "..." 显示 在 触发 按钮 上 的 文本 。 和 showon 设置 为 "button" 或 "both" 时 结合 使 
用 。Code examples: 


初始 化 带 有 指定 buttonText 选项 的 datepicker : 


$( ".selector" ).datepicker({ buttonText: "Choose" 3); 


在 初始 化 后 ， 获 取 或 设置 buttonrext 选项 : 
// getter 
var buttonText = $( ".selector" ).datepicker( "option", "buttonText" ); 


// setter 
$( ".selector" ).datepicker( "option", "buttonText", "Choose" ); 


calculateWeekType: Function() 


Default: jouery.datepicker.iso8601Wweek 一 个 函数 来 计算 当前 周 是 一 年 中 的 第 几 周 。 默认 实 
现 使 用 ISO8601 的 定义 : 的 定义 执行 : 每 周 从 周一 开始 ; 每 年 的 第 一 个 星期 包含 这 年 的 第 一 个 
星期 四 。 愚 人 码头 注 : 这 意味 着 今年 的 第 一 周 中 可 能 会 包含 去 年 的 3 天 ,并 且 今 年 的 3 天 可 能 会 
被 包含 进去 年 的 最 后 一 周 中 。Code examples: 


初始 化 带 有 指定 calculateweek 选项 的 datepicker : 


$( ".selector" ).datepicker({ calculateWeek: myWeekCalc }); 


在 初始 化 后 ， 获 取 或 设置 calculateweek 选项 : 


// getter 
var calculateWeek = $( ".selector" ).datepicker( "option", "calculateWeek" ); 


// setter 
$( ".selector" ).datepicker( "option", "calculateWeek", myWeekCalc ); 


changeMonth Type: Boolean 


Default: false 人 允许 你 将 月 份 修 改 为 一 个 下 拉 菜 单 。 你 可 以 将 参数 设置 为 false 来 禁用 此 功 
能 ， 也 就 是 显示 为 文字 。Code examples: 


初始 化 带 有 指定 changeMonth 选项 的 datepicker : 


$( ".selector" ).datepicker({ changeMonth: true }); 


在 初始 化 后 ， 获 取 或 设置 changeMonth 选项 : 
// getter 
var changeMonth = $( ".selector" ).datepicker( "option", "changeMonth" ); 


// setter 
$( ".selector" ).datepicker( "option", "changeMonth", true ); 


changeYearType: Boolean 


Default: false 人 允许 你 将 年 份 修改 为 一 个 下 拉 菜 单 。 你 可 以 将 参数 设置 为 false 来 禁用 此 功 
能 ， 也 就 是 显示 为 文字 。 使 用 yearRange 选项 来 控制 哪些 年 是 可 供 选 择 。 Code examples: 


初始 化 带 有 指定 changeYear 选项 的 datepicker : 


$( ".selector" ).datepicker({ changeYear: true }); 


在 初始 化 后 ， 获 取 或 设置 changeYear 选项 : 
// getter 
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" ); 


// setter 
$( ".selector" ).datepicker( "option", "changeYear", true ); 


closeTextType: String 


Default: "bone" 关闭 连接 显示 的 文字 。 使 用 showButtonPanel 选项 以 显示 此 按钮 。Code 
examples: 


初始 化 带 有 指定 closeText 选项 的 datepicker : 


$( ".selector" ).datepicker({ closeText: "Close" }); 


在 初始 化 后 ， 获 取 或 设置 closeText 选项 : 


// getter 
var closeText = $( ".selector" ).datepicker( "option", "closeText" ); 


// setter 
$( ".selector" ).datepicker( "option", "closeText", "Close" ); 


constrainlnputType: Boolean 


Default: true 当 值 为 true 时 ， 在 输入 栏 的 输入 被 限制 为 当前 的 日 期 格式 dateFormat 选项 


许 的 字符 。Code examples: 


初始 化 带 有 指定 constrainInput 选项 的 datepicker : 


$( ".selector" ).datepicker({ constrainInput: false }); 


在 初始 化 后 ， 获 取 或 设置 constrainInput 选项 : 


// getter 


var constrainInput = $( ".selector" ).datepicker( "option", "constrainInput" ); 


// setter 
$( ".selector" ).datepicker( "option", "constrainInput", false ); 


currentTextType: String 


Default: "Today" 当前 日 期 链接 以 文本 形式 显示 。 使 用 showButtonPanel 选项 以 显示 此 按 


钮 。Code examples: 


初始 化 带 有 指定 currentText 选项 的 datepicker : 


$( ".selector" ).datepicker({ currentText: "Now" }); 


在 初始 化 后 ， 获 取 或 设置 currentText 选项 : 


// getter 
var currentText = $( ".selector" ).datepicker( "option", "currentText" ); 


// setter 
$( ".selector" ).datepicker( "option", "currentText", "Now" ); 


dateFormatType: String 


Default: "mm/dd/yy" 摘 述 和 显示 日 期 的 格式 。 对 于 可 能 的 格式 的 完整 列表 ， 请 参 
M] [ formatDate ](#utility-formatpate) KÆ. Code examples: 


初始 化 带 有 指定 dateFormat 选项 的 datepicker : 


a 


J 


b 


$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" }); 


在 初始 化 后 ， 获 取 或 设置 dateFormat 选项 : 


// getter 
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); 


// setter 
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" ); 


dayNamesType: Array 


Default: 
[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ] 日 期 长 的 
名 字 的 列表 ， 从 星期 日 (Sunday) 开 始 ， 依 照 dateformat 的 设置 进行 使 用 。Code examples: 


初始 化 带 有 指定 dayNames 选项 的 datepicker : 


$( ".selector" ).datepicker({ dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeud 
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在 初始 化 后 ， 获 取 或 设置 dayNames 选项 : 


// getter 
var dayNames = $( ".selector" ).datepicker( "option", "dayNames" ); 


// setter 
$( ".selector" ).datepicker( "option", "dayNames", [ "Dimanche", "Lundi", "Mardi", "Mercr 


EJE 





dayNamesMinType: Array 


Default: [ "su", "Mo", "Tu", "we", "Th", "Fr", "sa" ] 日 期 最 小 化 简称 的 列表 , 从 周 日 开始 
(Sunday), 用 在 datepicker 每 列 的 头 部 .。Code examples: 


初始 化 带 有 指定 dayNamesMin 选项 的 datepicker : 


$( ".selector" ).datepicker({ dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ] } 
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在 初始 化 后 ， 获 取 或 设置 dayNamesMin 选项 : 


// getter 
var dayNamesMin = $( ".selector" ).datepicker( "option", "dayNamesMin" ); 


// setter 
$( ".selector" ).datepicker( "option", "dayNamesMin", [ "Di", "Lu", "Ma", "Me", "Je", "Ve 
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dayNamesShortType: Array 


Default: [ "sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] 日 期 名 称 的 简写 的 列表 ， ME 
日 开始 (Sunday), 依照 dateFormat 的 设置 使 用 。Code examples: 


初始 化 带 有 指定 dayNamesshort 选项 的 datepicker : 


$( ".selector" ).datepicker({ dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", 





在 初始 化 后 ， 获 取 或 设置 dayNamesshort 选项 : 


// getter 
var dayNamesShort = $( ".selector" ).datepicker( "option", "dayNamesShort" ); 


// setter 
$( ".selector" ).datepicker( "option", "dayNamesShort", [ "Dim", "Lun", "Mar", "Mer", "Je 
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defaultDateType: Date or Number or String 


Default: null 如 果 该 字段 为 空 时 设置 第 一 次 打开 时 显示 的 日 期 。 通过 Date 对 象 或 字符 串 在 
当前 dateFormat 中 指定 任何 一 个 实际 的 日 期 ， 或 者 一 个 和 今天 对 比 的 数字 (例如 +7) 或 者 
一 个 连续 的 字符 串 值 ('y' 表示 年 , mM 表示 月 , WRTA, 'd 表 示 日 , 例如 . '+1m+7d'), 或 者 为 空 
则 是 今天 .支持 多 个 类 型 : 
。 Date: 一 个 包含 默认 日 期 的 date 对 象 。 
e Number: 一 个 和 今天 对 比 的 数字 。 例 如 2 表示 从 今天 开始 的 第 二 天 ， (BABKE: 
BD: 后天) ， -1 表示 了 昨天。 
e String: 一 个 由 dateFormat 选项 定义 格式 的 字符 串 ， 或 相对 日 期 。 相对 日 期 必须 包含 值 
和 期 间 对 ; 有 效 期 间 为 : y" RAIL, "w 表示 几 月 ，"w" 表示 几 周 ， 和 "a" 表示 
几 天 。 例如 ， — "eam +7d" 表示 从 今天 开始 的 一 个 月 加 七 天 。 


Code examples: 


初始 化 带 有 指定 defaultpate 选项 的 datepicker : 


$( ".selector" ).datepicker({ defaultDate: +7 }); 


在 初始 化 后 ， 获 取 或 设置 defaultpate 选项 : 


// getter 
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" ); 


// setter 
$( ".selector" ).datepicker( "option", "defaultDate", +7 ); 


durationType: or String 


Default: "normal" 设置 datepicker 展 开动 画 的 显示 时 间 ， 可 以 是 一 个 宣 秒 值 , 也 可 以 使 用 以 下 
的 三 种 字符 值 来 表示 ("slow", "normal", "fast"), 或 者 为 " 则 马上 显示 。Code examples: 


初始 化 带 有 指定 duration 选项 的 datepicker : 


$( ".selector" ).datepicker({ duration: "slow" }); 


在 初始 化 后 ， 获 取 或 设置 duration 选项 : 


// getter 
var duration = $( ".selector" ).datepicker( "option", "duration" ); 


// setter 
$( ".selector" ).datepicker( "option", "duration", "slow" ); 


firstDayType: Integer 
Default: o 设置 一 周 中 的 第 一 天 : 周 日 是 o, 周一 是 1, 以 此 类 推 。Code examples: 
初始 化 带 有 指定 firstpay 选项 的 datepicker : 


$( ".selector" ).datepicker({ firstDay: 1 }); 


在 初始 化 后 ， 获 取 或 设置 firstDay 选项 : 


// getter 
var firstDay = $( ".selector" ).datepicker( "option", "firstDay" ); 


// setter 
$( ".selector" ).datepicker( "option", "firstDay", 1 ); 
gotoCurrentType: Boolean 


Default: false 如 果 设 置 为 true , 当前 日 的 链接 将 移动 到 当前 选中 的 日 期 ， 而 不 是 今 
XK. Code examples: 


初始 化 带 有 指定 gotocurrent 选项 的 datepicker : 


$( ".selector" ).datepicker({ gotoCurrent: true }); 


在 初始 化 后 ， 获 取 或 设置 gotocurrent 选项 : 
// getter 
var gotoCurrent = $( ".selector" ).datepicker( "option", "gotoCurrent" ); 


// setter 
$( ".selector" ).datepicker( "option", "gotoCurrent", true ); 


hidelfNoPrevNextType: Boolean 


Default: false 通常 当前 一 个 和 下 一 个 链接 被 禁用 时 不 适用 (参看 minate 和 maxpate ). 你 
可 以 通过 设置 此 属性 为 true 完全 的 隐藏 他 们 .Code examples: 


初始 化 带 有 指定 hiderfNoPrevNext 选项 的 datepicker : 


$( ".selector" ).datepicker({ hideIfNoPrevNext: true }); 


在 初始 化 后 ， 获 取 或 设置 hiderfNoPrevNext 选项 : 


// getter 
var hideIfNoPrevNext = $( ".selector" ).datepicker( "option", "hideIfNoPrevNext" ); 


// setter 
$( ".selector" ).datepicker( "option", "hideIfNoPrevNext", true ); 


ISRTLType: Boolean 


Default: false 当前 语言 描述 是 否 为 自 右 向 左 的 。 ( 蚌 人 码头 注 : 例如 阿拉 伯 语 ) Code 
examples: 


初始 化 带 有 指定 isRTL 选项 的 datepicker : 


$( ".selector" ).datepicker({ isRTL: true }); 


在 初始 化 后 ， 获 取 或 设置 isRTL 选项 : 


// getter 
var isRTL = $( ".selector" ).datepicker( "option", "isRTL" ); 


// setter 
$( ".selector" ).datepicker( "option", "isRTL", true ); 


maxDateType: Date or Number or String 


Default: null 最 大 的 可 选 日 期 。 当 设置 为 null 时 ， 没 有 上 限 。 支 持 多 个 类 型 : 


。 Date: 一 个 包含 默认 日 期 的 date 对 象 。 

。 Number: 一 个 和 今天 对 比 的 数字 。 例 如 2 表示 从 今天 开始 的 第 二 天 ， (RAGAME: 
即 : 后 天 ) ， -1 表示 昨天 。 

e String: 一 个 由 dateFormat 选项 定义 格式 的 字符 串 ， 或 相对 日 期 。 相对 日 期 必须 包含 值 
和 期 间 对 ; 有 效 期 间 为 : Uy" RENE, "w 表示 几 月 ，"w" 表示 几 周 ， 和 "a" 表示 
几 天 。 例如 ， "+1im +7d" 表示 从 今天 开始 的 一 个 月 加 七 天 。 


Code examples: 


初始 化 带 有 指定 maxpate 选项 的 datepicker : 


$( ".selector" ).datepicker({ maxDate: "+1m +1w" }); 


在 初始 化 后 ， 获 取 或 设置 maxpate 选项 : 


// getter 


var maxDate = $( ".selector" ).datepicker( "option", "maxDate" ); 
// setter 
$( ".selector" ).datepicker( "option", "maxDate", "+1im +1w" ); 


minDateType: Date or Number or String 
Default: null 最 小 的 可 选 日 期 。 当 设置 为 null 时 ， 没 有 下 限 。 支 持 多 个 类 型 : 


。 Date: 一 个 包含 默认 日 期 的 date 对 象 。 

e Number: 一 个 和 今天 对 比 的 数字 。 例 如 2 表示 从 今天 开始 的 第 二 天 ， (四 人 码头 注 : 
Bl: 后 天 ) ， -1 表示 昨天 。 

e String: 一 个 由 dateFormat 选项 定义 格式 的 字符 串 ， 或 相对 日 期 。 相对 日 期 必须 包含 值 
和 期 间 对 ; 有 效 期 间 为 : "y" 表示 几 年 ，"m" 表示 几 月 ， "w 表示 几 周 ， 和 "a" 表示 
几 天 。 例如 ， "+1im +7d" 表示 从 今天 开始 的 一 个 月 加 七 天 。 


Code examples: 


初始 化 带 有 指定 minate 选项 的 datepicker : 


$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) 3); 


在 初始 化 后 ， 获 取 或 设置 minpate 选项 : 


// getter 
var minDate = $( ".selector" ).datepicker( "option", "minDate" ); 


// setter 
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) ); 


monthNamesType: Array 


Default: 


[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "i 


月 份 的 完全 名 称 列表 ， 依 照 dateformat 的 设置 进行 使 用 。Code examples: 


初始 化 带 有 指定 monthNames 选项 的 datepicker : 


$( ".selector" ).datepicker({ monthNames: [ "Januar", "Februar", "Marts", "April", "Maj", 
El — # 


在 初始 化 后 ， 获 取 或 设置 monthNames 选项 : 





// getter 
var monthNames = $( ".selector" ).datepicker( "option", "monthNames" ); 


// setter 
$( ".selector" ).datepicker( "option", "monthNames", [ "Januar", "Februar", "Marts", "Apr 





monthNamesShortType: Array 


Default: 
[ "Jan", "Feb", "Mar", "Apr", "May", wuna, JS bu "Aug", "Sep", LE "Nov", "Dec" ] H 
份 简写 名 称 的 列表 ， 依 照 dateFormat 的 设置 进行 使 用 。Code examples: 


初始 化 带 有 指定 monthNamesshort 选项 的 datepicker : 


$( ".selector" ).datepicker({ monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun" 
eee 


在 初始 化 后 ， 获 取 或 设置 monthNamesShort 选项 : 





// getter 

var monthNamesShort = $( ".selector" ).datepicker( "option", "monthNamesShort" ); 

// setter 

$( ".selector" ).datepicker( "option", "monthNamesShort", [ "Jan", "Feb", "Mar", "Apr", " 
1] a 








navigationAsDateFormatType: Boolean 


Default: false 确定 是 prevText 和 nextText 选项 是 否 应 该 被 解析 
Jj [ formatDate ](#utility-formatDate) 图 数 的 日 期 ， 让 他 们 能 够 显示 目标 的 月 份 名称 .Code 
examples: 


初始 化 带 有 指定 navigationAsDateFormat 选项 的 datepicker : 


$( ".selector" ).datepicker({ navigationAsDateFormat: true }); 


在 初始 化 后 ， 获 取 或 设置 navigationAsDateFormat 选项 : 


// getter 
var navigationAsDateFormat = $( ".selector" ).datepicker( "option", "navigationAsDateForm 


// setter 
$( ".selector" ).datepicker( "option", "navigationAsDateFormat", true ); 
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nextTextType: String 


Default: "Next" 下 个 月 链接 显示 的 文字 。 使 用 标准 ThemeRoller 样 式 ， 这 个 值 被 替换 为 一 个 
图 标 。Code examples: 


初始 化 带 有 指定 nextrext 选项 的 datepicker : 


$( ".selector" ).datepicker({ nextText: "Later" }); 


在 初始 化 后 ， 获 取 或 设置 nextText 选项 : 


// getter 
var nextText = $( ".selector" ).datepicker( "option", "nextText" ); 


// setter 
$( ".selector" ).datepicker( "option", "nextText", "Later" ); 


numberOfMonthsType: Number or Array 


Default: 1 设置 一 次 显示 几 个 月 .支持 多 个 类 型 : 


e Number: 一 行 显示 的 月 份 数 
e Array: 一 个 数组 定义 的 显示 行 数 和 列 数 。 


Code examples: 


初始 化 带 有 指定 numberofMonths 选项 的 datepicker : 


$( ".selector" ).datepicker({ numberOfMonths: [ 2, 3 ] }); 


在 初始 化 后 ， 获 取 或 设置 numberofMonths 选项 : 
// getter 
var numberOfMonths = $( ".selector" ).datepicker( "option", "numberOfMonths" ); 


// setter 
$( ".selector" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] ); 


onChangeMonthYearType: Function( Integer year, Integer 
month, Object inst ) 


Default: nuii 当 datepicker 移 动 到 一 个 新 的 月 份 并 /或 年 份 时 调用 。 AWB SE BI AE. 
4, Fld (1-12) ， 和 datepicker 实 例 作为 参数 。 tnis 指向 相关 联 的 输入 域 。 


onCloseType: Function( String dateText, Object inst ) 


Default: null 当 datepicker 关 闭 时 调用 ， 确 定 一 个 日 期 是 否 被 选中 。 RAHUL 
文本 ("" 如 果 没 有 ) 和 datepicker 实 例 作 为 参数 。 tnis 指向 相关 联 的 输入 域 。 


onSelectType: Function( String dateText, Object inst ) 


Default: null 当选 择 datepicker 调 用 。 该 函数 接收 所 选 日 期 的 文本 和 datepicker 实 例 作为 参 
数 。 this 指向 相关 联 的 输入 域 。 


prevTextType: String 


Default: "Prev" 上 个 月 链接 显示 的 文字 。 使 用 标准 ThemeRoller 样 式 ， 这 个 值 被 蔡 换 为 一 个 
图 标 。Code examples: 


初始 化 带 有 指定 prevText 选项 的 datepicker : 


$( ".selector" ).datepicker({ prevText: "Earlier" }); 


在 初始 化 后 ， 获 取 或 设置 prevText 选项 : 


// getter 
var prevText = $( ".selector" ).datepicker( "option", "prevText" ); 


// setter 
$( ".selector" ).datepicker( "option", "prevText", "Earlier" ); 


selectOtherMonthsType: Boolean 


Default: false 显示 在 当前 月 份 的 之 前 或 之 后 的 日 期 是 否 可 以 被 选择 。 〈 恩 人 码头 注 : 比如 
2014 年 4 月 1 日 是 周二 ， 如 果 showotherMonths 选项 设置 为 true ， 那 么 2014 年 3 月 31 日 ，2014 
年 3 月 30 日 会 以 灰色 的 形式 显示 在 4 月 份 的 面板 上 ， 这 个 选项 表示 在 4 月 份 的 面板 上 是 否 可 以 选 
择 2014 年 3 月 31 日 ，2014 年 3 月 30 日 这 两 个 日 期 。5 月 也 是 一 样 的 。) 这 选项 仅 适用 于 如 

果 showotherMonths 选项 设置 为 true 的 时 候 。Code examples: 


初始 化 带 有 指定 selectotherMonths 选项 的 datepicker : 


$( ".selector" ).datepicker({ selectOtherMonths: true }); 


在 初始 化 后 ， 获 取 或 设置 selectotherMonths 选项 : 


// getter 
var selectOtherMonths = $( ".selector" ).datepicker( "option", "selectOtherMonths" ); 


// setter 
$( ".selector" ).datepicker( "option", "selectOtherMonths", true ); 


shortYearCutoffType: Number or String 


Default: "+10" 设置 一 个 定义 日 期 所 处 实际 的 截断 年 份 值 (与 daterormat 中 的 'y' 共 同 使 用 ). 如 
果 是 一 个 数值 (0-99) 那 么 将 直接 使 用 这 些 值 . 如 果 提 供 的 是 一 个 字符 串 值 那么 它 将 被 转换 为 数 
值 添加 到 当前 年 . 一 旦 截断 年 开始 计算 , 任何 输入 的 日 期 的 年 份 小 于 或 者 等 于 它 的 话 将 被 判定 
为 在 本 世纪 ,大 于 他 的 将 被 判定 为 在 上 个 世纪 .支持 多 个 类 型 : 


e Number: 一 个 o 到 oo 的 值 表示 截断 年 份 值 
e String: 从 本 年 份 开始 的 相对 年 数 ， 例 如 ，"+3" or "-5" . 


Code examples: 


初始 化 带 有 指定 shortyearcutoff 选项 的 datepicker : 


$( ".selector" ).datepicker({ shortYearCutoff: 50 }); 


在 初始 化 后 ， 获 取 或 设置 shortYearcutoff 选项 : 


// getter 
var shortYearCutoff = $( ".selector" ).datepicker( "option", "shortYearCutoff" ); 


// setter 
$( ".selector" ).datepicker( "option", "shortYearCutoff", 50 ); 


showAnimType: String 


Default: "show" 设置 显示 /隐藏 datepicker 的 动画 名 称 . 使 用 "show" (默认 )，"slideDown" ， 
"fadeIn" ,或 其 他 任何 jQuery Ul effects 的 显示 /隐藏 效果 。 设置 为 空 字 符 串 可 以 禁用 动画 ， 
即 直 接 显示 或 者 隐藏 。Code examples: 


初始 化 带 有 指定 showanim 选项 的 datepicker : 


$( ".selector" ).datepicker({ showAnim: "fold" }); 


在 初始 化 后 ， 获 取 或 设置 showAnim 选项 : 


// getter 
var showAnim = $( ".selector" ).datepicker( "option", "showAnim" ); 


// setter 
$( ".selector" ).datepicker( "option", "showAnim", "fold" ); 


showButtonPanelType: Boolean 


Default: false 是 否 显示 日 历 下 方 的 按钮 面板 。 按钮 面板 包含 两 个 按 妞 ， 一 个 今天 按钮 链接 
到 当前 日 期 ， 和 一 个 完成 按钮 关闭 datepicker。 该 按钮 的 文本 可 以 使 用 currentText 和 
closeText 选项 分 别 进行 定制 。Code examples: 


初始 化 带 有 指定 showButtonPanel 选项 的 datepicker : 


$( ".selector" ).datepicker({ showButtonPanel: true }); 


在 初始 化 后 ， 获 取 或 设置 showButtonPanel 选项 : 
// getter 
var showButtonPanel = $( ".selector" ).datepicker( "option", "showButtonPanel" ); 


// setter 
$( ".selector" ).datepicker( "option", "showButtonPanel", true ); 


showCurrentAtPosType: Number 


Default: o 通过 numberofMonths 选项 设置 多 月 份 显示 的 情况 下 ， 当 前 月 份 显 示 的 位 置 。 CR 
人 码头 注 : 自 顶 部 /左边 开始 第 n 位 ， 以 0 开始 计数 。) Code examples: 


初始 化 带 有 指定 showcurrentatPos 选项 的 datepicker : 


$( ".selector" ).datepicker({ showCurrentAtPos: 3 }); 


在 初始 化 后 ， 获 取 或 设置 showcurrentatPos 选项 : 


// getter 
var showCurrentAtPos = $( ".selector" ).datepicker( "option", "showCurrentAtPos" ); 


// setter 
$( ".selector" ).datepicker( "option", "showCurrentAtPos", 3 ); 


showMonthAfterYearType: Boolean 


Default: false 是 否 在 面板 的 头 部 年 份 后 面 显示 月 份 。Code examples: 


初始 化 带 有 指定 showMonthAfterYear 选项 的 datepicker : 


$( ".selector" ).datepicker({ showMonthAfterYear: true }); 


在 初始 化 后 ， 获 取 或 设置 showMonthafteryYear 选项 : 


// getter 
var showMonthAfterYear = $( ".selector" ).datepicker( "option", "showMonthAfterYear" ); 


// setter 
$( ".selector" ).datepicker( "option", "showMonthAfterYear", true ); 
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showOnType: String 


Default: "focus" 设置 触发 datepicker 自 动 出 现 的 事件 名 称 ,是 focus ( "focus" ) 还 是 clicked 
( "button" ) 或 者 任何 事件 ( "both" ), Code examples: 


初始 化 带 有 指定 showon 选项 的 datepicker : 


$( ".selector" ).datepicker({ showOn: "both" }); 


在 初始 化 后 ， 获 取 或 设置 showon 选项 : 


// getter 
var Showon = $( ".selector" ).datepicker( "option", "showOn" ); 


// setter 
$( ".selector" ).datepicker( "option", "showOn", "both" ); 


showOptionsType: Object 


Default: ( 如 果 想 showanim 选项 来 使 用 jQuery UI effects 动 画 效 果 , 你 可 以 为 动画 提供 一 
额外 的 设置 .Code examples: 


初始 化 带 有 指定 showoptions 选项 的 datepicker : 


$( ".selector" ).datepicker({ showOptions: { direction: "up" } }); 


在 初始 化 后 ， 获 取 或 设置 showoptions 选项 : 
// getter 
var showOptions = $( ".selector" ).datepicker( "option", "showOptions" ); 


// setter 
$( ".selector" ).datepicker( "option", "showOptions", ( direction: "up" } ); 


showOtherMonthsType: Boolean 


Default: false 是 否 在 当前 月 份 面板 显示 上 、 下 两 个 月 的 一 些 日 期 数 (Aoi) 。 想 要 让 这 
些 日 期 可 选 ， 请 使 用 selectotherMonths 选项 。Code examples: 


初始 化 带 有 指定 showotherMonths 选项 的 datepicker : 


$( ".selector" ).datepicker({ showOtherMonths: true }); 


在 初始 化 后 ， 获 取 或 设置 showotherMonths 选项 : 


// getter 
var showOtherMonths = $( ".selector" ).datepicker( "option", "showOtherMonths" ); 


// setter 
$( ".selector" ).datepicker( "option", "showOtherMonths", true ); 


showWeekType: Boolean 


Default: false WRA true ， 面 板 将 增加 一 列 ， 显 示 一 年 中 的 哪 一 周 。 该 calculateweek 选 
项 决定 一 年 中 的 哪 一 周 是 如 何 计 算 的 。 您 可 以 改变 firstpay 选项 。Code examples: 


初始 化 带 有 指定 showweek 选项 的 datepicker : 


$( ".selector" ).datepicker({ showWeek: true }); 


在 初始 化 后 ， 获 取 或 设置 showweek 选项 : 


// getter 
var showWeek = $( ".selector" ).datepicker( "option", "showWeek" ); 


// setter 
$( ".selector" ).datepicker( "option", "showWeek", true ); 


stepMonthsType: Number 


Default: 1 当 点 击 上 /下 一 月 链接 时 ， 一 次 翻 几 个 月 。Code examples: 


初始 化 带 有 指定 stepMontns 选项 的 datepicker : 


$( ".selector" ).datepicker({ stepMonths: 3 }); 


在 初始 化 后 ， 获 取 或 设置 stepMonths 选项 : 


// getter 
var stepMonths = $( ".selector" ).datepicker( "option", "stepMonths" ); 


// setter 
$( ".selector" ).datepicker( "option", "stepMonths", 3 ); 


weekHeaderType: String 


Default: "wk" 本 年 度 哪 一 周 列 的 标题 显示 文本 。 使 用 showweek 选项 以 显示 此 列 。Code 
examples: 


初始 化 带 有 指定 weekHeader 选项 的 datepicker : 


$( ".selector" ).datepicker({ weekHeader: "w" 3); 


在 初始 化 后 ， 获 取 或 设置 weekHeader 选项 : 


// getter 
var weekHeader = $( ".selector" ).datepicker( "option", "weekHeader" ); 


// setter 
$( ".selector" ).datepicker( "option", "weekHeader", "W" ); 


yearRangeType: String 


Default: "c-10:c+10" 控制 年 份 的 下 拉 列 表 中 显示 的 年 份 数量 ， 可 以 是 相对 当前 年 (-nn:+nn)， 
相对 于 选择 年 份 (-nn:+nn)， 也 可 以 是 绝对 值 ( "nnnn:nnnn" )， 或 这 些 格 式 的 组 合 

( "nnnn:-nn" ), 请 注意 ， 此 选项 仅 影 响 下 拉 列 表 中 的 显示 ， 使 用 minpate 和 /或 maxpate 选 
项 限制 哪些 日 期 可 以 选择 。Code examples: 


初始 化 带 有 指定 yearRange 选项 的 datepicker : 


$( ".selector" ).datepicker({ yearRange: "2002:2012" }); 


在 初始 化 后 ， 获 取 或 设置 yearRange 选项 : 


// getter 
var yearRange = $( ".selector" ).datepicker( "option", "yearRange" ); 


// setter 
$( ".selector" ).datepicker( "option", "yearRange", "2002:2012" ); 


yearSuffixType: String 


Default: "" 显示 在 月 份 头 部 中 年 份 后 面 的 文本 。Code examples: 


初始 化 带 有 指定 yearsuffix 选项 的 datepicker : 


$( ".selector" ).datepicker({ yearSuffix: "CE" }); 


在 初始 化 后 ， 获 取 或 设置 yearsuffix 选项 : 


// getter 
var yearSuffix = $( ".selector" ).datepicker( "option", "yearSuffix" ); 


// setter 
$( ".selector" ).datepicker( "option", "yearSuffix", "CE" ); 


Methods 


destroy()Returns: jQuery (plugin only) 

完全 移 除 datepicker 功 能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).datepicker( "destroy" ); 


dialog( date [, onSelect ] [, settings ] [, pos ] )Returns: 
jQuery (plugin only) 


在 一 个 "dialog" 中 打开 一 个 datepicker。 


e dateType: String or Date 初 始 化 的 日 期 。 

e onSelectType: Function() 当 一 个 日 期 被 选中 时 的 回调 函数 . 这 个 函数 接收 日 期 文本 和 
datepicker 实 例 作为 参数 。 

e settingsType: Options 新 的 datepicker 的 选项 。 


e posType: Number[2] or MouseEventdialog 对 话 框 的 top/left 的 [x，y] 坐标 ， 或 者 一 个 鼠 
标 事件 MouseEvent 的 坐标 。 如 果 不 提供 此 参数 dialog 将 显示 在 屏幕 正中 。 


Code examples: 
调用 dialog 方法 : 


$( ".selector" ).datepicker( "dialog", "10/12/2012" ); 


getDate()Returns: Date 

返回 一 个 datepicker 中 当前 日 期 , 如 果 没 有 日 期 被 选中 的 话 那么 返回 null 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 getDate 方法 : 


var currentDate = $( ".selector" ).datepicker( "getDate" ); 


hide()Returns: jQuery (plugin only) 


关闭 先前 打开 的 date picker, 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 hide 方法 : 


$( ".selector" ).datepicker( "hide" ); 


isDisabled()Returns: Boolean 
确定 一 个 datepicker 是 否 已 禁用 . 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 isDisabled 方法 : 


var isDisabled = $( ".selector" ).datepicker( "isDisabled" ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 
调用 该 方法 : 


var isDisabled = $( ".selector" ).datepicker( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 datepicker 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).datepicker( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 


设置 与 指定 的 optionName 关联 的 datepicker 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).datepicker( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 datepicker 设置 一 个 或 多 个 选项 。 
e optionsType: Object 要 设置 的 option-value xt. 


Code examples: 


调用 该 方法 : 


$( ".selector" ).datepicker( "option", { disabled: true } ); 


refresh()Returns: jQuery (plugin only) 
在 作出 一 些 外 部 修改 后 ， 重 绘 日 期 选择 器 。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 refresh 方法 : 


$( ".selector" ).datepicker( "refresh" ); 


setDate( date )Returns: jQuery (plugin only) 


为 datepicker 设 置 日 期 。 新 的 日 期 可 能 是 一 个 Date 对 象 或 当前 date format 的 字符 串 〈 例 
如 ， "01/26/2009" ) ， 一 个 从 今天 开始 的 天 数 (例如 ， +7 ) 或 值 和 周期 的 字符 串 "y" X 
TER, "m" 表示 月 份 数 ，"w" 表示 周 数 ，"d" 表示 天 数 ,例如 ， "eam +7d" )， 或 者 

为 null 来 清除 选 定 的 日 期 。 


e dateType: String or Date 新 的 日 期 。 
Code examples: 


调用 setDate 方法 : 


$( ".selector" ).datepicker( "setDate", "10/12/2012" ); 


show()Returns: jQuery (plugin only) 


示 日 期 datepicker 插 件 。 如 果 datepicker 被 绑 定 到 input 元 素 ， 要 显示 datepicker 的 input 元 素 
须 是 可 见 的 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 show 方法 : 


$( ".selector" ).datepicker( "show" ); 


widget()Returns: jQuery 


返回 一 个 包含 datepicker 的 jquery WR. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).datepicker( "widget" ); 


Example: 
一 个 简单 的 jQuery UI Datepicker. 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>datepicker demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id="datepicker"></div> 
<script> 
$( "#datepicker" ).datepicker(); 


</script> 


</body> 
</html> 
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Dialog Widget 


Categories: Widgets 


version added: 1.0 


Description: 在 一 个 交互 覆盖 层 中 打开 内 容 。 


QuickNavExamples 


Options 


e append To 
e autoOpen 
e buttons 


closeOnEscape 


close Text 
e dialogClass 


draggable 
e height 

e hide 

e maxHeight 
e maxWidth 
e minHeight 
e minWidth 
e modal 

e position 
e resizable 
e show 

e title 

e width 


Methods 


e close 

e destroy 

e isOpen 

e moveToTop 


e open 
e option 
e widget 


Extension Points 


e allowlnteraction 


Events 


e beforeClose 
e close 

e create 

e drag 

e dragStart 
e dragStop 
e focus 

e open 

e resize 

e resizeStart 
e resizeStop 


对 话 框 是 一 个 甚 浮 窗口 ， 包 括 一 个 标题 栏 和 一 个 内 容 区 域 。 对 话 框 窗口 可 以 移动 ， 重 新 调整 
大 小 ， 默 认 情 况 下 通过 'x' 图 标 关 闭 。 

如 果 内 容 长 度 超过 最 大 高 度 ， 滚动 条 会 自动 出 现 。 

一 个 底部 按钮 栏 和 一 个 半 透 明 的 模式 覆盖 层 是 常见 的 添加 选项 。 

焦点 

当 打 开 一 个 对 话 框 时 ， 焦 点 会 自动 移动 到 满足 下 面条 件 的 第 一 个 项 目 : 

1. #7 autofocus 属性 的 对 话 框 内 的 第 一 个 元 素 

2. 对话 框 内 容 内 的 第 一 个 :tabbable 元 素 

3， 对 话 框 按钮 面板 内 的 第 一 个 :tabbable 元 素 

4， 对 话 框 的 关闭 按钮 

5.， 对 话 框 本 身 

当 打 开 时 ， 对 话 框 部 件 (Dialog Widget) 确保 通过 tab 切换 对 话 框 内 元 素 间 的 焦点 ， 不 包括 


对 话 框 外 的 元 素 。 模 态 对 话 框 防止 鼠标 用 户 点 击 对 话 框 外 的 元 素 。 


当 关 闭 对 话 框 时 ， 焦 点 自动 返回 到 之 前 对 话 框 打开 时 获得 焦点 的 元 素 上 。 
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在 一 些 情况 下 ， 您 可 能 想 要 隐藏 关闭 按钮 ， 例 如 ， 在 按钮 面板 中 已 经 有 一 个 关闭 按钮 的 情 
况 。 最 好 的 解决 方法 是 通过 CSS。 作 为 实例 ， 您 可 以 定义 一 个 简单 的 规则 ， 比 如 : 


.no-close .ui-dialog-titlebar-close { 
display: none; 


然后 ， 您 可 以 添加 no-close class 到 任意 的 对 话 框 ， 用 来 隐藏 关闭 按钮 : 


$( "#dialog" ).dialog({ 
dialogClass: "no-close", 
buttons: [ 
text: "OK", 


click: function() { 
$( this ).dialog( "close" ); 


3) 


主题 


对 话 框 部 件 (Dialog Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 
需要 使 用 对 话 框 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-dialog : 对 话 框 的 外 层 容 器 。 
o ui-dialog-titlebar : 包含 对 话 框 标题 和 关闭 按钮 的 标题 栏 。 
= ui-dialog-title : 对 话 框 文本 标题 周转 的 容器 。 
@ ui-dialog-titlebar-close : 对 话 框 的 关闭 按钮 。 
o ui-dialog-content : 对 话 框 内 容 周围 的 容器 。 这 也 是 部 件 被 实例 化 的 元 素 。 
o ui-dialog-buttonpane : 包含 对 话 按钮 的 面板 。 只 有 当 设 置 了 buttons ANTS 


m ui-dialog-buttonset : 按钮 周围 的 容器 。 


此 外 ， 当 设置 了 modal 选项 时 ， 一 个 带 有 ui-widget-overlay class 名 称 的 元 素 被 追加 到 
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依赖 


e UI 核心 (UI Core) 

e 部 件 库 (Widget Factory) 

e 定位 (Position) 

e 按钮 部 件 (Button Widget) 

可 拖 搜 小 部 件 (Draggable Widget) ”可 选 的 ; 当 和 与 draggable 选项 一 起 使 用 时 ) 


e 可 调整 尺寸 小 部 件 (Resizable Widget) (F469 ; S45 resizable 选项 一 起 使 用 时 ) 
e 特效 核心 (Effects Core) (可 选 的 ; 当 与 show 和 hide 选项 一 起 使 用 时 ) 


其 他 注意 事项 : 
e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


Options 


appendToType: Selector 
Default: "body" 
dialog (AES 2, WRmodal FE) 应 该 被 追加 到 哪个 元 素 。 


注意 : 当 dialog 处 于 打开 状态 的 时 候 appendTo 选项 不 应 该 被 改变 。(version added: 
1.10.0)Code examples: 


初始 化 带 有 指定 appendTo 选项 的 dialog : 


$( ".selector" ).dialog({ appendTo: "#someElem" }); 


在 初始 化 后 ， 获 取 或 设置 appendTo 选项 : 
// getter 
var appendTo = $( ".selector" ).dialog( "option", "appendTo" ); 


// setter 
$( ".selector" ).dialog( "option", "appendTo", "#someElem" ); 


autoOpenType: Boolean 


Default: true 当 设置 为 true 时 ， dialog 会 在 初始 化 时 自动 打开 . 如 果 为 false dialog 将 
会 继续 隐藏 直到 调用 open() 方法 Code examples: 


初始 化 带 有 指定 autoopen 选项 的 dialog : 


$( ".selector" ).dialog({ autoOpen: false }); 


在 初始 化 后 ， 获 取 或 设置 autoopen 选项 : 


// getter 
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" ); 


// setter 
$( ".selector" ).dialog( "option", "autoOpen", false ); 


buttonsType: Object or Array 


Default: 4 指定 哪些 按钮 应 该 在 dialog 上 显示 。 回调 的 上 下 文 是 dialog 元 素 (恩人 码头 
XE: this 指向 ) ; 如 果 你 需要 访问 按钮 ， 可 以 利用 事件 对 象 的 目标 元 素 。 支 持 多 个 类 型 : 


。 Object 键 是 按钮 标签 ， 值 是 点 击 相关 按钮 时 执行 的 回调 图 数 。 
e Array: 该 数组 的 每 个 元 素 必 须 是 一 个 定义 特性 ， 属 性 ， 和 按钮 上 设置 的 事件 处 理 程序 的 
对 象 。 


Code examples: 


初始 化 带 有 指定 buttons 选项 的 dialog : 


$( ".selector" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( 
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在 初始 化 后 ， 获 取 或 设置 buttons 选项 : 





// getter 
var buttons = $( ".selector" ).dialog( "option", "buttons" ); 


// setter 
$( ".selector" ).dialog( "option", "buttons", [ { text: "Ok", click: function() { $( this 
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closeOnEscapeType: Boolean 


Default: true 指定 具有 焦点 的 dialog， 在 用 户 按 下 退出 (ESC) 键 时 ， 是 否 应 该 关闭 
。Code examples: 


初始 化 带 有 指定 closeonEscape 选项 的 dialog : 


$( ".selector" ).dialog({ closeOnEscape: false }); 


在 初始 化 后 ， 获 取 或 设置 closeonEscape 选项 : 


// getter 
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" ); 


// setter 
$( ".selector" ).dialog( "option", "closeOnEscape", false ); 


closeTextType: String 


Default: "close" 指定 关闭 按钮 的 文本 。 注意 ， 关 闭 文本 在 使 用 标准 的 主题 时 ， 是 隐藏 的 
(visibly : hidden) 。Code examples: 


初始 化 带 有 指定 closerext 选项 的 dialog : 


$( ".selector" ).dialog({ closeText: "hide" }); 


在 初始 化 后 ， 获 取 或 设置 closeText 选项 : 
// getter 
var closeText = $( ".selector" ).dialog( "option", "closeText" ); 


// setter 
$( ".selector" ).dialog( "option", "closeText", "hide" ); 


dialogClassType: String 


Default: "" 在 使 用 额外 附加 的 主题 时 ， 指 定 dialog 的 类 名 称 ， 这 些 样式 添加 到 dialog 
上 。Code examples: 


初始 化 带 有 指定 dialogclass 选项 的 dialog : 


$( ".selector" ).dialog({ dialogClass: "alert" }); 


在 初始 化 后 ， 获 取 或 设置 dialogclass 选项 : 
// getter 
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" ); 


// setter 
$( ".selector" ).dialog( "option", "dialogClass", "alert" ); 


draggableType: Boolean 


Default: true 如 果 设 置 为 true , dialog 将 可 以 使 用 标题 栏 实现 拖 动 。 需 要 包含 jQuery UI 
Draggable 部 件 。Code examples: 


初始 化 带 有 指定 draggable 选项 的 dialog : 


$( ".selector" ).dialog({ draggable: false }); 


在 初始 化 后 ， 获 取 或 设置 draggable 选项 : 


// getter 
var draggable = $( ".selector" ).dialog( "option", "draggable" ); 


// setter 
$( ".selector" ).dialog( "option", "draggable", false ); 


heightType: Number or String 


Default: "auto" 设置 对 话 框 的 高 度 (单位 : RR) 。 支 持 多 个 类 型 : 


e Number: 高 度 ， 单 位 : 像素 。 
e String: 唯一 支持 的 字符 串 值 为 "auto" ， 这 将 使 对 话 框 高 度 根据 其 内 容 进 行 自动 调整 。 


Code examples: 
初始 化 带 有 指定 height 选项 的 dialog : 


$( ".selector" ).dialog({ height: 400 }); 


在 初始 化 后 ， 获 取 或 设置 height 选项 : 


// getter 
var height = $( ".selector" ).dialog( "option", "height" ); 


// setter 
$( ".selector" ).dialog( "option", "height", 400 ); 


hideType: Boolean or Number or String or Object 
Default: nuii dialog B] (隐藏 ) 时 的 动画 效果 。 支 持 多 个 类 型 : 


e Boolean: 当 设 置 为 false , 将 不 使 用 动画 效果 ， 该 dialog 会 立即 被 隐藏 。 如 果 设 置 
A true, 该 dialog 将 会 以 默认 的 持续 时 间 和 默认 的 效果 淡出 。 

。 Number: 该 dialog 将 以 指定 的 时 间 和 默认 的 效果 淡出 。 

e String: 该 dialog 将 使 用 指定 的 效果 被 隐藏 。 该 值 可 以 是 一 个 jQuery 内 置 的 动画 方法 的 名 
称 ， 如 "slideup" ， 或 一 个 jQuery UI 效果 的 名 称 ， 如 "fold" 。 在 这 两 种 情况 下 ， 将 
使 用 默认 持续 时 间 和 默认 的 动画 效果 。 

e Object: 如 果 该 值 是 一 个 对 象 ， 那么 effect , delay , duration , 和 easing 可 能 要 提 
供 。 如 果 effect 属性 包含 一 个 jQuery 方法 的 名 称 ， 那么 该 方法 将 被 使 用 ; 否则 它 被 假 
定 为 是 一 个 jQuery UI 的 效果 的 名 称 。 当 使 用 jQuery UI 支持 额外 设置 的 效果 ， 你 可 以 在 
对 象 中 包含 那些 设置 并 且 它 们 将 被 传递 到 的 效果 。 如 果 duration 持续 时 间或 easing [E 
性 被 省 略 ， 那么 默认 值 将 被 使 用 。 如 果 effect MAH, BBA "fadeout" 将 被 使 用 。 如 
R delay RAR, 那么 将 不 使 用 延迟 。 


Code examples: 


初始 化 带 有 指定 hide 选项 的 dialog : 


$( ".selector" ).dialog({ hide: { effect: "explode", duration: 1000 } }); 


在 初始 化 后 ， 获 取 或 设置 hide 选项 : 
// getter 
var hide = $( ".selector" ).dialog( "option", "hide" ); 


// setter 
$( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } ); 


maxHeightType: Number 
Default: false dialog 可 以 调整 的 最 大 高 度 ， 以 像素 为 单位 。Code examples: 
初始 化 带 有 指定 maxHeight 选项 的 dialog : 


$( ".selector" ).dialog({ maxHeight: 600 }); 


在 初始 化 后 ， 获 取 或 设置 maxHeight 选项 : 
// getter 
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" ); 


// setter 
$( ".selector" ).dialog( "option", "maxHeight", 600 ); 


maxWidthType: Number 
Default: false dialog 可 以 调整 的 最 大 宽度 ， 以 像素 为 单位 。Code examples: 


初始 化 带 有 指定 maxwidth 选项 的 dialog : 


$( ".selector" ).dialog({ maxwidth: 600 }); 


在 初始 化 后 ， 获 取 或 设置 maxwidth 选项 : 


// getter 
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" ); 


// setter 
$( ".selector" ).dialog( "option", "maxWidth", 600 ); 


minHeightType: Number 


Default: 150 dialog 可 以 调整 的 最 小 高 度 ， 以 像素 为 单位 。Code examples: 


初始 化 带 有 指定 _minHeight 选项 的 dialog : 


$( ".selector" ).dialog({ minHeight: 200 }); 


在 初始 化 后 ， 获 取 或 设置 minHeight 选项 : 
// getter 
var minHeight = $( ".selector" ).dialog( "option", "minHeight" ); 


// setter 
$( ".selector" ).dialog( "option", "minHeight", 200 ); 


minWidthType: Number 
Default: 15e dialog 可 以 调整 的 最 小 宽度 ， 以 像素 为 单位 。Code examples: 
初始 化 带 有 指定 minwidth 选项 的 dialog : 


$( ".selector" ).dialog({ minwidth: 200 }); 


在 初始 化 后 ， 获 取 或 设置 minwidth 选项 : 


// getter 
var minWidth = $( ".selector" ).dialog( "option", "minWidth" ); 


// setter 
$( ".selector" ).dialog( "option", "minWidth", 200 ); 


modalType: Boolean 


Default: false 如 果 设 置 为 true , jàdialogRE B9 Z; 页 面 上 的 其 他 项 目 将 被 禁用 ， 
即 ， 不 能 交互 。 遮 罩 层 创建 对 话 框 下 方 ， 但 高 于 其 它 页 面 元 素 。Code examples: 


初始 化 带 有 指定 modal 选项 的 dialog : 


$( ".selector" ).dialog({ modal: true }); 


在 初始 化 后 ， 获 取 或 设置 modal 选项 : 
// getter 
var modal = $( ".selector" ).dialog( "option", "modal" ); 


// setter 
$( ".selector" ).dialog( "option", "modal", true ); 


positionType: Object or String or Array 


Default: { my: "center", at: "center", of: window } 

指定 dialog 显 示 的 位 置 。 该 dialog 将 会 处 理 冲 突 ， 使 得 尽 可 能 多 的 dialog 尽 可 能 地 可 见 。 
注意 : 不 赞成 使 用 string 和 Array 格式 。 

支持 多 个 类 型 : 


。 Object: 确定 dialog 打 开 时 的 位 置 。 of 选项 默认 为 窗口 ， 但 您 可 以 指定 其 他 元 素 定位 。 
你 可 以 人 参考 jQuery UI Position 实 用 工具 ， 了 解 各 种 选项 的 更 多 细节 。 

e String: 一 个 字符 串 ， 表 示 可 视 区 内 的 位 置 。 可 能 的 值 : "center" , "left" , "right" , 
"top" , "bottom" . 

。 Array: 一 个 包含 相对 于 可 见 区 域 左 上 角 x, y 偏 移 坐 标 (单位 为 像素 ) 的 数组 ， 或 一 个 可 
能 值 的 字符 串 名 称 。 


Code examples: 
初始 化 带 有 指定 position 选项 的 dialog : 

$( ".selector" ).dialog({ position: { my: "left top", at: "left bottom", of: button } }); 
[EE Ae X[ 
在 初始 化 后 ， 获 取 或 设置 position 选项 : 


// getter 
var position = $( ".selector" ).dialog( "option", "position" ); 


// setter 
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: b 


| 





resizableType: Boolean 


Default: true 如 果 设 置 为 true, 那么 dialog 人 允许 调整 大 小 。 需 要 包含 jQuery UI Resizable 
widget。Code examples: 


初始 化 带 有 指定 resizable 选项 的 dialog : 


$( ".selector" ).dialog({ resizable: false }); 


在 初始 化 后 ， 获 取 或 设置 resizable 选项 : 


// getter 
var resizable = $( ".selector" ).dialog( "option", "resizable" ); 


// setter 
$( ".selector" ).dialog( "option", "resizable", false ); 


showType: Boolean or Number or String or Object 


Default: nuii dialog 打 开 (显示 ) 时 的 动画 效果 。 支 持 多 个 类 型 : 


e Boolean: 当 设 置 为 false , 将 不 使 用 动画 效果 ， 该 dialog 会 立即 被 隐藏 。 如 果 设 置 
为 true ， 该 dialog 将 会 以 默认 的 持续 时 间 和 默认 的 效果 淡出 。 

e Number: 该 dialog 将 以 指定 的 时 间 和 默认 的 效果 淡出 。 

e String: 该 dialog 将 使 用 指定 的 效果 被 隐藏 。 该 值 可 以 是 一 个 jQuery 内 置 的 动画 方法 的 名 
称 ， 如 "slideup" ， 或 一 个 jQuery Ul ARAE, AN "fola" 。 在 这 两 种 情况 下 ， 将 
使 用 默认 持续 时 间 和 默认 的 动画 效果 。 

e Object: 如 果 该 值 是 一 个 对 象 ， 那么 effect , delay , duration , 和 easing 可 能 要 提 
ft, 如 果 effect 属性 包含 一 个 jQuery 方法 的 名 称 ， 那么 该 方法 将 被 使 用 ; 否则 它 被 假 
定 为 是 一 个 jQuery UI 的 效果 的 名 称 。 当 使 用 jQuery UI 支持 额外 设置 的 效果 ， 你 可 以 在 
对 象 中 包含 那些 设 G 并 且 它们 将 被 传递 到 的 效果 。 如 果 duration 持续 时 间或 easing 属 
性 被 省 略 ， 那么 默认 值 将 被 使 用 。 如 果 effect 被 省 略 ， 那么 "fadeout" 将 被 使 用 。 如 
R delay RAR, 那么 将 不 使 用 延迟 。 


Code examples: 


初始 化 带 有 指定 show 选项 的 dialog : 


$( ".selector" ).dialog({ show: { effect: "blind", duration: 800 } }); 


在 初始 化 后 ， 获 取 或 设置 show 选项 : 


// getter 
var show = $( ".selector" ).dialog( "option", "show" ); 


// setter 
$( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } ); 


titleType: String 


Default: nuii 指定 dialog 的 标题 文字 。 如 果 值 为 null ,那么 该 dialog 元 素 上 的 title 属性 将 
被 使 用 。Code examples: 


初始 化 带 有 指定 title 选项 的 dialog: 


$( ".selector" ).dialog({ title: "Dialog Title" }); 


在 初始 化 后 ， 获 取 或 设置 title 选项 : 
// getter 
var title = $( ".selector" ).dialog( "option", "title" ); 


// setter 
$( ".selector" ).dialog( "option", "title", "Dialog Title" ); 


widthType: Number 
Default: 300 设置 dialog 的 宽度 (单位 : 像素 ) . Code examples: 
初始 化 带 有 指定 width 选项 的 dialog : 


$( ".selector" ).dialog({ width: 500 }); 


在 初始 化 后 ， 获 取 或 设置 width 选项 : 
// getter 
var width = $( ".selector" ).dialog( "option", "width" ); 


// setter 
$( ".selector" ).dialog( "option", "width", 500 ); 


Methods 


close()Returns: jQuery (plugin only) 


关闭 dialog. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 close 方法 : 


$( ".selector" ).dialog( "close" ); 


destroy()Returns: jQuery (plugin only) 
完全 移 除 dialog 功能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 该 方法 不 接受 任何 参数 。 


Code examples: 


调用 destroy 方法 : 


$( ".selector" ).dialog( "destroy" ); 


isOpen()Returns: Boolean 
确定 dialog 当前 是 否 打开 状态 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 
调用 isOpen 方法 : 


var isOpen = $( ".selector" ).dialog( "isOpen" ); 


moveToTop()Returns: jQuery (plugin only) 

移动 dialog 到 所 有 dialog 堆 栈 的 项 部 。 (恩人 码头 注 : 理解 为 z-index 层级 最 高 ) 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 moveToTop Aik : 


$( ".selector" ).dialog( "moveToTop" ); 


open()Returns: jQuery (plugin only) 


打开 dialog. 
e 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 open 方法 : 


$( ".selector" ).dialog( "open" ); 


option( optionName )Returns: Object 


获取 当前 与 指定 的 optionName 关联 的 值 。 


e optionNameType: String 要 获取 值 的 选项 的 名 称 。 


Code examples: 
调用 该 方法 : 


var isDisabled = $( ".selector" ).dialog( "option", "disabled" ) 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 dialog 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).dialog( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 dialog 选项 的 值 。 


。 optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).dialog( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 dialog 设置 一 个 或 多 个 选项 。 

e optionsType: Object 要 设置 的 option-value 对 。 
Code examples: 


调用 该 方法 : 


$( ".selector" ).dialog( "option", { disabled: true } ) 


widget()Returns: jQuery 


返回 一 个 包含 生成 包 应 元 素 的 jquery WR. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).dialog( "widget" ); 


扩展 点 (Extension Points) 


dialog 小 部 件 是 widget factory 构 建 的 ， 并 且 可 以 扩展 。 当 扩 展 部 件 时 ， 你 必须 覆盖 或 添加 新 
的 行为 到 现 有 的 方法 。 下 列 方法 被 提供 作为 扩展 点 用 相同 的 API 稳 定性 如 上 所 列 的 plugin 
methods, 有 关 小 部 件 扩 展 的 更 多 信息 ， 请 参阅 使 用 Widget Factory 扩展 小 部 件 。 


_allowlnteraction( event )Returns: Boolean 


带 遮 淖 的 对 话 框 不 允许 用 户 与 对 话 框 下 面 元 素 进行 交互 。 这 可 能 会 对 不 属于 该 dialog 的 子 元 
素 那 些 绝对 定位 的 其 他 元 素 产 生 问 题 。 _allowInteraction() 方法 确定 用 户 是 否 应 被 允许 与 给 
定 的 目标 元 素 进 行 交 互 ; Alt, 它 可 用 于 不 属于 该 dialog 的 子 元 素 白 名 单 中 的 元 素 但 你 希望 用 
户 能 够 使 用 。 


e eventType: Event 
Code examples: 


允许 Select2 插 件 在 遮 罩 对 话 框 中 使 用 。 _super() 调用 确保 该 对 话 框 中 的 元 素 仍 然 可 以 交 
互 。 


_allowInteraction: function( event ) { 
return !!$( event.target ).is( ".select2-input" ) || this. super( event ); 


Events 


beforeClose( event, ui )Type: dialogbeforeclose 
当 dialog 即 将 关闭 时 触发 。 如 果 取 消 ，dialog 将 不 会 关闭 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 


Code examples: 


初始 化 带 有 指定 beforeClose 回调 的 dialog : 


$( ".selector" ).dialog({ 
beforeClose: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogbeforeclose 事件 : 


$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} ); 


close( event, ui )Type: dialogclose 


当 dialog 关 闭 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 close 回调 的 dialog : 


$( ".selector" ).dialog({ 
close: function( event, ui ) {} 


H; 


绑 定 一 个 事件 监听 器 到 dialogclose 事件 : 


$( ".selector" ).on( "dialogclose", function( event, ui ) {} ); 


create( event, ui )Type: dialogcreate 


在 创建 dialog 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 dialog : 


$( ".selector" ).dialog({ 
create: function( event, ui ) (3 


H; 


绑 定 一 个 事件 监听 器 到 dialogcreate 事件 : 


$( ".selector" ).on( "dialogcreate", function( event, ui ) {} ); 


drag( event, ui )Type: dialogdrag 


在 dialog 正 在 被 拖 动 时 触发 。 


e eventType: Event 
e uiType: Object 
o positionType: Objectdialog 当 前 的 CSS position (位 置 ) 对 象 。 
o offsetType: Objectdialog 当 前 的 offset position ( 偏 移 位 置 ) 对 象 。 


Code examples: 


初始 化 带 有 指定 drag 回调 的 dialog : 


$( ".selector" ).dialog({ 
drag: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogdrag 事件 : 


$( ".selector" ).on( "dialogdrag", function( event, ui ) {} ); 


dragStart( event, ui )Type: dialogdragstart 


当 用 户 开 始 拖 动 dialog 时 触发 。 
e eventType: Event 
e uiType: Object 
o positionType: Objectdialog 当 前 的 CSS position (位 置 ) 对 象 。 
o offsetType: Objectdialog 当 前 的 offset position ( 偏 移 位 置 ) 对 象 。 


Code examples: 


初始 化 带 有 指定 dragStart 回调 的 dialog : 


$( ".selector" ).dialog({ 
dragStart: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogdragstart 事件 : 


$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} ); 


dragStop( event, ui )Type: dialogdragstop 
4dialog 停止 拖 动 时 触发 。 


e eventType: Event 
e uiType: Object 
o positionType: Objectdialog 当 前 的 CSS position (位 置 ) 对 象 。 
o offsetType: Objectdialog 当 前 的 offset position ( 偏 移 位 置 ) 对 象 。 


Code examples: 
初始 化 带 有 指定 dragStop 回调 的 dialog : 


$( ".selector" ).dialog({ 
dragStop: function( event, ui ) (3 
15 


绑 定 一 个 事件 监听 器 到 dialogdragstop 事件 : 


$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} ); 


focus( event, ui )Type: dialogfocus 
当 对 话 框 获取 焦点 时 触发 此 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 focus 回调 的 dialog : 


$( ".selector" ).dialog({ 
focus: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogfocus 事件 : 


$( ".selector" ).on( "dialogfocus", function( event, ui ) {} ); 


open( event, ui )Type: dialogopen 
当 对 话 框 打开 后 ， 触 发 此 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 open 回调 的 dialog : 


$( ".selector" ).dialog({ 
open: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogopen 事件 : 


$( ".selector" ).on( "dialogopen", function( event, ui ) {} ); 


resize( event, ui )Type: dialogresize 
当 对 话 框 大 小 改变 时 ， 触 发 此 事件 。 


e eventType: Event 
e uiType: Object 
o originalPositionType: Object 对 话 框 被 调整 大 小 之 前 的 CSS position (位 置 ) 对 象 
o positionType: Object 对 话 框 当前 的 CSS position (位 置 ) 对 象 。 
o originalSizeType: Object 对 话 框 被 调整 大 小 之 前 的 size (RI) 对 象 。 
o sizeType: Object 对 话 框 当前 的 size (RI) 对 象 。 


Code examples: 


初始 化 带 有 指定 resize 回调 的 dialog : 


$( ".selector" ).dialog({ 
resize: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 dialogresize 事件 : 


$( ".selector" ).on( "dialogresize", function( event, ui ) {} ); 


resizeStart( event, ui )Type: dialogresizestart 


当 开始 改变 对 话 框 大 小 时 ， 触 发 此 事件 。 
e eventType: Event 
e uiType: Object 
o originalPositionType: Object 对 话 框 被 调整 大 小 之 前 的 CSS position (位 置 ) 对 象 
o positionType: Object 对 话 框 当前 的 CSS position (位 置 ) 对 象 。 
o originalSizeType: Object 对 话 框 被 调整 大 小 之 前 的 size (RI) 对 象 。 
o sizeType: Object 对 话 框 当前 的 size (RI) 对 象 。 


Code examples: 


初始 化 带 有 指定 resizeStart 回调 的 dialog : 


$( ".selector" ).dialog({ 
resizeStart: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogresizestart 事件 : 


$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} ); 


resizeStop( event, ui )Type: dialogresizestop 


当 对 话 框 改变 大 小 后 ， 触 发 此 事件 。 


e eventType: Event 
e uiType: Object 
o originalPositionType: Object 对 话 框 被 调整 大 小 之 前 的 CSS position (位 置 ) 对 象 
o positionType: Object 对 话 框 当前 的 CSS position (位 置 ) 对 象 。 
o originalSizeType: Object 对 话 框 被 调整 大 小 之 前 的 size (RT) 对 象 。 
o sizeType: Object 对 话 框 当前 的 size (RI) 对 象 。 


Code examples: 


初始 化 带 有 指定 resizeStop 回调 的 dialog : 


$( ".selector" ).dialog({ 
resizeStop: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 dialogresizestop 事件 : 


$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} ); 


Example: 


一 个 简单 的 jQuery UI 对 话 框 (Dialog) 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>dialog demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«button id="opener">open the dialog</button> 
<div id="dialog" title="Dialog Title">I'm a dialog</div> 


<script> 
$( "#dialog" ).dialog({ autoOpen: false }); 
$( "#opener" ).click(function() { 
$( "#dialog" ).dialog( "open" ); 
1); 


</script> 


</body> 
</html> 
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Menu Widget 


Categories: Widgets 


version added: 1.9 


Description: #7 A Rir Fle & ERAF SiN Mb. 


QuickNavExamples 


Options 


e disabled 
e icons 

e menus 
e position 


e role 


Methods 


e blur 


collapse 


collapseAll 
e destroy 

e disable 

e enable 

e expand 

e focus 

e isFirstltem 
e isL astltem 
e next 

e nextPage 
e option 

e previous 
e previousPage 
e refresh 

e select 

e widget 


Events 


e blur 
e create 
e focus 


select 


菜单 可 以 用 任何 有 效 的 标记 创建 ， 只 要 元 素 有 严格 的 父 / 子 关系 且 每 个 条 目 都 有 一 个 锚 。 最 常 
用 的 元 素 是 无 序列 表 ( alt;ulagt; ) 


<ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
<li><a href="#">Item 2«/a»«/li» 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1«/a»«/li» 
<li><a href="#">Item 3-2«/a»«/li» 
<li><a href="#">Item 3-3«/a»«/li» 
<li><a href="#">Item 3-4«/a»«/li» 
<li><a href="#">Item 3-5«/a»«/li» 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5</a></li> 
</ul> 


如 果 使 用 一 个 非 &1t;ul&gt; / alt;liagt; 的 结构 ， 为 菜单 和 菜单 条 目 使 用 相同 的 元 素 ， 请 使 
FA menus 选项 来 区 分 两 个 元 素 ， 例 如 menus: "div.menuElement" o 


可 通过 向 元 素 添加 ui-state-disabled class 来 禁用 任何 菜单 条 目 。 


图 标 (Icons) 
为 了 向 菜单 添加 图 标 ， 请 在 标记 中 包含 图 标 : 


<ul id="menu"> 
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></1li> 
</ul> 


32% (Menu) 会 自动 向 无 图 标的 条 目 添加 必要 的 内 边 距 。 


分 隔 符 (Dividers) 
分 隔 符 元 素 可 通过 包含 未 链接 的 菜单 条 目 来 创建 ， 菜 单条 目 只 能 是 空格 / 破 折 号 : 


<ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
«li»-«/li» 
<li><a href="#">Item 2«/a»«/li» 
</ul> 


键盘 交互 (Keyboard interaction) 


e ENTER/SPACE : 调用 获得 焦点 的 菜单 项 的 动作 ， 可 能 会 打开 一 个 子 菜单 。 
。 UP : 移动 教导 到 上 一 个 菜单 项 。 

。 DOWN : 移动 教导 到 下 一 个 菜单 项 。 

。 RIGHT: 如 果 可 用 ， 则 打开 子 菜单 。 


操作 。 
。 ESCAPE : 关闭 当前 子 菜单 ， 移 动 焦点 到 父 菜 单项 。 如 果 焦 点 不 在 子 菜单 上 ， 则 不 进行 
任何 操作 。 


输入 一 个 字母 ， 移 动 焦 点 到 以 该 字母 开头 的 第 一 个 条 目 。 重 复 相同 的 字符 会 循环 显示 匹配 的 
条 目 。 在 一 个 时 间 内 输入 更 多 的 字符 则 匹配 所 输入 的 字符 。 


蔡 用 项 可 获得 键盘 焦点 ， 但 是 不 允许 任何 交互 。 


主题 化 (Theming) 


菜单 部 件 (Menu Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 
要 使 用 菜单 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-menu :菜单 的 外 层 容 器 。 如 果菜 单 包 含 图 标 ， 该 元 素 会 另外 带 有 一 个 
ui-menu-icons Class, 
O ui-menu-item : 单个 菜单 项 的 容器 。 
m ui-menu-icon : 通过 icons 选项 进行 子 菜单 图 标 设 置 。 
© ui-menu-divider : 菜单 项 之 间 的 分 隔 符 元 素 。 


依赖 (Dependencies) 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e 定位 (Position) 


其 他 注意 事项 (Additional Notes:) 


。 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


Options 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 该 menu (菜单 ) 。Code examples: 


初始 化 带 有 指定 disabled 选项 的 menu (E €) 


$( ".selector" ).menu({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).menu( "option", "disabled" ); 


// setter 
$( ".selector" ).menu( "option", "disabled", true ); 
iconsType: Object 


Default: { submenu: "ui-icon-carat-1-e" } 标题 要 使 用 的 图 标 ， 与 jQuery Ul CSS 框架 提供 
的 图 标 (Icons) 匹配 。 设 置 为 false 则 不 显示 图 标 。 


e submenu (string, default: "ui-icon-carat-1-e") 
Code examples: 


初始 化 带 有 指定 icons 选项 的 menu (菜单 ) 


$( ".selector" ).menu({ icons: { submenu: "ui-icon-circle-triangle-e" } }); 


在 初始 化 后 ， 获 取 或 设置 icons 选项 : 


// getter 
var icons = $( ".selector" ).menu( "option", "icons" ); 


// setter 
$( ".selector" ).menu( "option", "icons", { submenu: "ui-icon-circle-triangle-e" } ); 


menusType: String 

Default: "ui" 

作为 menu GE €) 容器 的 元 素 的 选择 器 ， 包括 子 菜单 。 

注意 : 初始 化 后 menus 选项 不 应 该 被 更 改 。 现 有 的 子 菜单 将 不 会 被 更 新 。Code examples: 


初始 化 带 有 指定 menus 选项 的 menu (菜单 ) 


$( ".selector" ).menu({ menus: "div" }); 


获取 menus 选项 : 


// getter 
var menus = $( ".selector" ).menu( "option", "menus" ); 


positionType: Object 


Default: { my: "left top", at: "right top" } 标识 建议 菜单 的 位 置 与 相关 的 input TRAX 
Ro of 选项 默认 为 input 元 素 ， 但 是 您 可 以 指定 另 一 个 定位 元 素 。 如 需 了 解 各 种 选项 的 更 多 
细节 ， 请 查看 jQuery UI Position, Code examples: 


初始 化 带 有 指定 position 选项 的 menu (菜单 ) 


$( ".selector" ).menu({ position: { my: "left top", at: "right-5 top+5" } }); 


在 初始 化 后 ， 获 取 或 设置 position 选项 : 


// getter 
var position = $( ".selector" ).menu( "option", "position" ); 


// setter 
$( ".selector" ).menu( "option", "position", { my: "left top", at: "right-5 top+5" } ); 


Ir eret M 8) 
roleType: String 


Default: "menu" 


自 定义 用 于 菜单 和 菜单 项 的 ARIA roles (8A 53 3:3 : 关于 ARIAroles) 。 在 默认 情况 下 菜单 
项 使 用 "menuitem" 。 设置 role 选项 为 了 使 "listbox" 使 用 "option" 作为 菜单 项 。 如 果 设 
iB null, 没有 roles 将 被 设置 ， 如 果菜 单 是 由 被 保持 焦点 另 一 个 元 件 控制 时 候 ， 非 常 有 

用 。 


注意 : 初始 化 后 role 选项 不 应 该 被 更 改 。 SUB (F) 菜单 和 菜单 项 将 不 会 被 更 新 。Code 
examples: 


初始 化 带 有 指定 role 选项 的 menu (GE €) 


$( ".selector" ).menu({ role: null }); 


获取 role 选项 : 


// getter 
var role = $( ".selector" ).menu( "option", "role" ); 


Methods 


blur( [event ] )Returns: jQuery (plugin only) 


从 菜单 中 删除 焦点 ， 重 置 任何 激活 样式 和 触发 菜单 的 blur 事件 。 
e eventType: Event 什 么 事件 触发 了 菜单 失去 焦点 。 
Code examples: 


调用 blur 方法 : 


$( ".selector" ).menu( "blur" ) 


collapse( [event ] )Returns: jQuery (plugin only) 
关闭 当前 活动 的 子 菜单 。 

e eventType: Event 什 么 事件 触发 关闭 子 菜单 
Code examples: 


调用 collapse 方法 : 


$( ".selector" ).menu( "collapse" ) 


collapseAll( [event ] [, all ] )Returns: jQuery (plugin only) 


关闭 全 部 打开 的 子 菜单 。 


e eventType: Event 什 么 事件 触发 关闭 子 菜单 。 
e allType: Boolean 表 示 所 有 子 菜单 是 否 应 该 被 关闭 或 只 有 子 菜单 中 包括 的 菜单 或 包含 触 
发 事件 的 目标 元 素 。 


Code examples: 


调用 collapseAll 方法 : 


$( ".selector" ).menu( "collapseAll", null, true ); 


destroy()Returns: jQuery (plugin only) 
完全 移 除 menu 功能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 该 方法 不 接受 任何 参数 。 


Code examples: 


调用 destroy 方法 : 


$( ".selector" ).menu( "destroy" ); 


disable()Returns: jQuery (plugin only) 


禁用 menu. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).menu( "disable" ); 


enable()Returns: jQuery (plugin only) 


启用 menu. 
e 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).menu( "enable" ); 


expand( [event ] )Returns: jQuery (plugin only) 
打开 当前 活动 项 目下 的 子 菜单 下 ， 如 果 有 的 话 。 

e eventType: Event 什 么 时 间 触 发 打开 子 菜单 。 
Code examples: 


调用 expand 方法 : 


$( ".selector" ).menu( "expand" ); 


focus( [event ], item )Returns: jQuery (plugin only) 


激活 一 个 特定 的 菜单 项 ， 首先 ， 如 果 打 开 存 在 的 任何 子 菜单 ， 并 触发 菜单 的 focus 事件 。 


e eventType: Event 什 么 事件 触发 了 菜单 项 获得 焦点 。 
e itemType: jQuery 要 获取 焦点 /激活 的 菜单 项 


Code examples: 


调用 focus 方法 : 


$( ".selector" ).menu( "focus", null, menu.find( ".ui-menu-item:last" ) ); 


isFirstltem()Returns: jQuery (plugin only) 
返回 一 个 布尔 值 ， 说 明 当 前 活动 项 目 是 否 菜单 的 第 一 项 。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 isFirstltem 方法 : 


var firstItem = $( ".selector" ).menu( "isFirstlItem" ); 


isLastltem()Returns: jQuery (plugin only) 
返回 一 个 布尔 值 ， 说 明 当 前 活动 项 目 是 否 菜单 的 最 后 一 项 。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 isLastltem 方法 : 


var lastItem = $( ".selector" ).menu( "isLastItem" ); 


next( [event ] )Returns: jQuery (plugin only) 
移动 激活 状态 到 下 一 个 菜单 项 。 
e eventType: Event 什 么 事件 触发 焦点 转移 。 


Code examples: 


调用 next 方法 : 


$( ".selector" ).menu( "next" ) 


nextPage( [event ] )Returns: jQuery (plugin only) 

移动 激活 状态 到 第 一 个 菜单 项 下 的 可 滚动 菜单 的 底部 ， 或 最 后 一 个 项 目 ， 如 果 不 可 滚动 。 
e eventType: Event 什 么 事件 触发 焦点 转移 。 

Code examples: 


调用 nextPage 方法 : 


$( ".selector" ).menu( "nextPage" ) 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

。 optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).menu( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 menu 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).menu( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 menu 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).menu( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
A menu 设置 一 个 或 多 个 选项 。 

e optionsType: Object 要 设置 的 option-value xt. 
Code examples: 


调用 该 方法 : 


$( ".selector" ).menu( "option", { disabled: true } ) 


previous( [event ] )Returns: jQuery (plugin only) 


移动 激活 状态 到 上 一 个 菜单 项 。 


Code examples: 


调用 previous 方法 : 


$( ".selector" ).menu( "previous" ); 


previousPage( [event ] )Returns: jQuery (plugin only) 

移动 激活 状态 到 第 一 个 菜单 项 下 的 可 滚动 菜单 的 顶部 ， 或 第 一 一 个 项 目 ， 如 果 不 可 滚动 。 
e eventType: Event 什 么 事件 触发 焦点 转移 。 

Code examples: 


调用 previousPage 方法 : 


$( ".selector" ).menu( "previousPage" ); 


refresh()Returns: jQuery (plugin only) 


初始 化 还 没有 被 初始 化 的 子 菜单 和 菜单 项 。 新 的 菜单 项 ， 包括 子 菜单 可 以 被 添加 到 菜单 或 
所 有 的 菜单 的 内 容 可 以 被 蔡 换 然后 使 用 refresh) 方法 初始 化 。 


。 该 方法 不 接受 任何 参数 。 


Code examples: 


调用 refresh 方法 : 


$( ".selector" ).menu( "refresh" ); 


select( [event ] )Returns: jQuery (plugin only) 
X IRIABIOEGÓBUIDGRGAR, GEGRBURBTGRGR 并 触发 菜单 中 的 select BH, 
e eventType: Event 什 么 事件 触发 选择 。 


Code examples: 


调用 select 方法 : 


$( ".selector" ).menu( "Select" ); 


widget()Returns: jQuery 

返回 一 个 包含 button 的 jauery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).menu( "widget" ) 


Events 


blur( event, ui )Type: menublur 


当 menu 失 去 焦点 时 触发 这 个 事件 。 


e eventType: Event 
e uiType: Object 
o itemType: jQuery 当前 激活 的 菜单 项 。 


Code examples: 


初始 化 带 有 指定 blur 回调 的 menu : 


$( ".selector" ).menu({ 
blur: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 menublur 事件 : 


$( ".selector" ).on( "menublur", function( event, ui ) {} ); 


create( event, ui )Type: menucreate 


当 创建 menu 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 menu : 


$( ".selector" ).menu({ 
create: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 menucreate 事件 : 


$( ".selector" ).on( "menucreate", function( event, ui ) {} ); 


focus( event, ui )Type: menufocus 
当当 一 个 菜单 获得 焦点 或 当 任意 一 个 菜单 项 被 激活 时 触发 这 个 事件 。 


e eventType: Event 
e uiType: Object 
o itemType: jQuery 当前 激活 的 菜单 项 。 


Code examples: 


初始 化 带 有 指定 focus 回调 的 menu : 


$( ".selector" ).menu({ 
focus: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 menufocus 事件 : 


$( ".selector" ).on( "menufocus", function( event, ui ) {} ); 


select( event, ui )Type: menuselect 


当 才 安 被 选中 的 时 候 触发 该 事件 。 


e eventType: Event 
e uiType: Object 
o itemType: jQuery 当前 激活 的 菜单 项 。 


Code examples: 


初始 化 带 有 指定 select 回调 的 menu : 


$( ".selector" ).menu({ 
select: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 menuselect 事件 : 


$( ".selector" ).on( "menuselect", function( event, ui ) {} ); 


Example: 


一 个 简单 的 jQuery UI Menu 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>menu demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
<style> 
.Ui-menu { 
width: 200px; 


</style> 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<ul id="menu"> 
<li><a href="#">Item 1«/a»«/li» 
<li><a href="#">Item 2«/a»«/li» 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1«/a»«/li» 
<li><a href="#">Item 3-2«/a»«/li» 
<li><a href="#">Item 3-3«/a»«/li» 
<li><a href="#">Item 3-4«/a»«/li» 
<li><a href="#">Item 3-5«/a»«/li» 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5</a></li> 
</ul> 


<script> 
$( "#menu" ).menu(); 
</script> 


</body> 
</html> 





Progressbar Widget 


Categories: Widgets 


version added: 1.6 


Description: 显示 一 个 确定 的 或 不 确定 的 进程 状态 。 


QuickNavExamples 


Options 


e disabled 
e max 


e value 


Methods 


e destroy 
e disable 
e enable 
e option 
e value 


e widget 


Events 


e change 
e complete 
e create 


进度 条 被 设计 来 显示 进度 的 当前 完成 百分比 。 进 度 条 通过 CSS 编码 灵活 调整 大 小 ， 默 认 会 缩 
放 到 适应 父 容器 的 大 小 。 


一 个 确定 的 进度 条 只 能 在 系统 可 以 准确 更 新 当前 状态 的 情况 下 使 用 。 一 个 确定 的 进度 条 不 会 
从 左 向 右 填 充 ， 然 后 循环 回 到 空 - 如 果 不 能 计算 实际 状态 ， 则 使 用 不 确定 的 进度 条 以 便 提 供用 
PES. 


主题 (Theming) 


进度 条 部 件 (Progressbar Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样 
式 。 如 果 需 要 使 用 进度 条 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-progressbar : 进度 条 的 外 层 容 器 。 该 元 素 会 为 不 确定 的 进度 条 另外 添加 一 个 
ui-progressbar-indeterminate Class, 
©  ui-progressbar-value : 该 元 素 代表 进度 条 的 填充 部 分 。 
@ ui-progressbar-overlay : 用 于 为 不 确定 的 进度 条 显示 动画 的 履 盖 层 。 


依赖 (Dependencies) 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 


其 他 注意 事项 (Additional Notes) 


。 该 部 件 要 求 一 些 功能 性 的 CSS， 和 否则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


Options 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 该 progressbar (进度 条 ) 。 Code examples: 


初始 化 带 有 指定 disabled 选项 的 progressbar (进度 条 ) 


$( ".selector" ).progressbar({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 


var disabled = $( ".selector" ).progressbar( "option", "disabled" ); 
// setter 
$( ".selector" ).progressbar( "option", "disabled", true ); 


maxType: Number 


Default: 100 progressbar 〈 进 度 条 ) 的 最 大 值 。Code examples: 


初始 化 带 有 指定 max 选项 的 progressbar (进度 条 ) 


$( ".selector" ).progressbar({ max: 1024 }); 


在 初始 化 后 ， 获 取 或 设置 max 选项 : 
// getter 
var max = $( ".selector" ).progressbar( "option", "max" ); 


// setter 
$( ".selector" ).progressbar( "option", "max", 1024 ); 


valueType: Number or Boolean 


Default: e progressbar (进度 条 ) 的 进度 值 .支持 多 个 类 型 : 


e Number: o 到 max 之 间 的 值 . 
e Boolean: 值 可 以 设置 为 false 来 创建 一 个 不 确定 的 progressbar (进度 条 ) 。 


Code examples: 


初始 化 带 有 指定 value 选项 的 progressbar (HER) 


$( ".selector" ).progressbar({ value: 25 }); 


在 初始 化 后 ， 获 取 或 设置 value 选项 : 
// getter 
var value = $( ".selector" ).progressbar( "option", "value" ); 


// setter 
$( ".selector" ).progressbar( "option", "value", 25 ); 


Methods 


destroy()Returns: jQuery (plugin only) 

完全 移 除 progressbar (HER) 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).progressbar( "destroy" ); 


disable()Returns: jQuery (plugin only) 


禁用 progressbar (进度 条 ) 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).progressbar( "disable" ); 


enable()Returns: jQuery (plugin only) 


启用 progressbar (进度 条 ) . 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).progressbar( "enable" ); 


option( optionName )Returns: Object 


获取 当前 与 指定 的 optionName 关联 的 值 。 
e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).progressbar( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 progressbar 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 该 方法 : 


var options = $( ".selector" ).progressbar( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 


设置 与 指定 的 optionName 关联 的 progressbar 选项 的 值 。 


。 optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).progressbar( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 progressbar (HER) 设置 一 个 或 多 个 选项 。 

e optionsType: Object 要 设置 的 option-value xt. 
Code examples: 


调用 该 方法 : 


$( ".selector" ).progressbar( "option", { disabled: true } ); 


value()Returns: Number or Boolean 


获取 progressbar (进度 条 ) 的 当前 值 。 
e 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 该 方法 : 


var progressSoFar = $( ".selector" ).progressbar( "value" ); 


value( value )Returns: jQuery (plugin only) 
设置 progressbar (进度 条 ) 的 当前 值 。 
e valueType: Number or Boolean 用 来 设置 的 值 。 有 效 值 的 详细 描述 查看 value 


Code examples: 


调用 该 方法 : 


$( ".selector" ).progressbar( "value", 50 ); 


widget()Returns: jQuery 

返回 一 个 progressbar (进度 条 ) 的 jquery 对 象 。 
e 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 widget 方法 : 


var widget = $( ".selector" ).progressbar( "widget" ); 


Events 


change( event, ui )Type: progressbarchange 


当 progressbar (进度 条 ) 的 值 改 变 的 时 候 触 发 该 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 change 回 调 的 progressbar (进度 条 ) 


$( ".selector" ).progressbar({ 
change: function( event, ui ) {} 
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绑 定 一 个 事件 监听 器 到 progressbarchange 事件 : 


$( ".selector" ).on( "progressbarchange", function( event, ui ) {} ); 


complete( event, ui )Type: progressbarcomplete 


*4progressbar (进度 条 ) 达到 最 大 值 时 触发 该 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 


Code examples: 


初始 化 带 有 指定 complete 回 调 的 progressbar (进度 条 ) 


$( ".selector" ).progressbar({ 
complete: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 progressbarcomplete 事件 : 


$( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} ); 


create( event, ui )Type: progressbarcreate 


当 progressbar (进度 条 ) 被 创建 时 触发 该 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回 调 的 progressbar (进度 条 ) 


$( ".selector" ).progressbar({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 progressbarcreate 事件 : 


$( ".selector" ).on( "progressbarcreate", function( event, ui ) {} ); 


Examples: 


Example: 一 个 简单 的 jQuery UI Progressbar 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>progressbar demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id-"progressbar"»«/div» 


«script» 
$( "#progressbar" ).progressbar({ 
value: 37 


3); 


</script> 


</body> 
</html> 


E| HE 


Example: 一 个 简单 的 jQuery UI 不 确定 的 进度 条 (Indeterminate 
Progressbar) 。 





<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>progressbar demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<div id-"progressbar"»«/div» 


<script> 
$( "#progressbar" ).progressbar({ 
value: false 


3); 


«/script» 


«/body» 
</html> 





Slider Widget 


Categories: Widgets 


version added: 1.5 


Description: 拖 动手 柄 以 选择 一 个 数值 。 


QuickNavExamples 


Options 


e animate 

e disabled 

e max 

e min 

e orientation 
e range 

e step 

e value 


e values 


Methods 


e destroy 
e disable 
e enable 
e option 
e value 
e values 


e widget 


Events 


e change 
e create 
e slide 

e start 


e Stop 


jQuery UI Slider 插件 使 所 选择 的 元 素 成 为 一 个 滑 块 (slider). 可 以 多 种 选项 ,例如 多 个 操作 手柄 
和 操作 范围 。 手柄 可 以 被 鼠标 拖 动 或 者 随 着 方向 键 移动 。 


slider 小 工具 将 在 初始 化 的 时 候 根 据 ui-slider-handle 样式 名 创建 手柄 元 素 。 您 可 以 在 初始 化 
前 通过 创建 和 追加 的 方式 ， 或 者 在 元 素 上 添加 ui-slider-handle 样式 来 自 定 义 手 柄 元 素 。 这 
只 会 创建 需要 匹配 value / values 的 手柄 数值 个 数 。 例 如 ， 如 果 您 指定 
的 值 : [ 1，5，18 ] ， 并 创建 一 个 自 定 义 手 柄 ， 该 插件 将 创建 另外 两 个 。 


主题 (Theming) 


slider 小 工具 使 用 jQuery UI CSS framework 样 式 的 外 观 和 感觉 。 如 果 滑 块 具体 祥 式 是 必须 的 ， 
你 可 以 用 下 面 的 CSS 类 名 : 


e ui-slider | 滑 块 控件 的 轨道 。 该 元 素 将 追加 一 个 ui-slider-horizontal 或 
ui-slider-vertical 样式 名 ， 这 取决 于 slider 小 工具 是 横向 还 是 纵向 的 。 另外 县 有 UI 的 滑 
块 水 平 或 UI 滑 块 垂直 取决 于 orientation 参数 ， 表 示 滑 块 的 取向 的 类 名 。 

9 ui-slider-handle : 滑 块 手柄 . 
o ui-slider-range : 当 设 置 选项 时 使 用 的 已 选 范围 。 如 果 range 选项 设置 为 "min" 
或 者 "max" ， 则 该 元 素 会 分 别 另 外 带 有 一 个 ui-slider-range-min 或 


ui-slider-range-max 类 。 


依赖 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e 鼠标 交互 (Mouse Interaction) 


其 他 注意 事项 : 
e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


选项 


animate 类 型 : Boolean or String or Number 


默认 值 : false 当 用 户 单 击 滑 块 轨道 时 是 否 平稳 地 滑动 手柄 。 也 可 以 接受 任何 有 效 的 动画 持 
续 时 间 。 多 种 类 型 支持 : 


e Boolean: 当 设 置 为 true Bj, 滑动 手柄 将 以 默认 的 持续 时 间 执 行动 画 。 


e String: 速度 的 名 称 , 比如 "fast" 或 "slow" o 
e Number: 动画 持续 时 间 , 以 毫秒 为 单位 。 


代码 示例 : 
使 用 指定 animate 选项 初始 化 滑 块 : 


$( ".selector" ).slider({ animate: "fast" }); 


初始 化 后 ， 获 取 或 者 设置 animate 选项 : 
// getter 
var animate = $( ".selector" ).slider( "option", "animate" ); 


// setter 
$( ".selector" ).slider( "option", "animate", "fast" ); 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 滑 块 。Code examples: 


使 用 disabled 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ disabled: true }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 disabled 选项 : 
// getter 
var disabled = $( ".selector" ).slider( "option", "disabled" ); 


// setter 
$( ".selector" ).slider( "option", "disabled", true ); 


maxType: Number 


Default: 100 滑 块 的 最 大 值 。Code examples: 


使 用 max 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ max: 50 3); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 max 选项 : 


// getter 
var max = $( ".selector" ).slider( "option", "max" ); 


// setter 
$( ".selector" ).slider( "option", "max", 50 ); 


minType: Number 
Default: o 滑 块 的 最 小 值 Code examples: 
使 用 min 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ min: 10 }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 min 选项 : 


// getter 
var min = $( ".selector" ).slider( "option", "min" ); 


// setter 
$( ".selector" ).slider( "option", "min", 10 ); 


orientationType: String 


Default: "horizontal" 确定 滑 块 手柄 将 KEFE (REE, RAA) 或 垂直 (最 小 在 底部 ， 
最 大 在 顶部 ) 移动 。 (恩人 码头 注 : 就 是 滑 块 的 方向 ， 横 向 或 纵向 ) BAER 
值 : "horizontal" (横向 ) , "vertical" (纵向 ) 。Code examples: 


使 用 orientation 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ orientation: "vertical" }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 orientation 选项 : 


// getter 
var orientation = $( ".selector" ).slider( "option", "orientation" ); 


// setter 
$( ".selector" ).slider( "option", "orientation", "vertical" ); 


rangeType: Boolean or String 
Default: false 滑 块 是 否 表现 为 一 个 范围 。 多 种 类 型 支持 : 


e Boolean: 如 果 设 置 为 true ,如 果 你 有 两 个 手柄 ，slider 将 会 感 点 到 他 们 之 间 各 种 可 能 的 范 
围 要 素 。 


e String: 或 者 他 们 是 "min" 或 者 "max" 值 。 最 小 的 范围 将 从 slider 的 最 小 值 传递 给 操作 
柄 。 最 大 的 范围 将 从 slider 的 最 大 值 传递 给 操作 柄 


Code examples: 


使 用 range 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ range: true }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 range 选项 : 
// getter 
var range = $( ".selector" ).slider( "option", "range" ); 


// setter 
$( ".selector" ).slider( "option", "range", true ); 


stepType: Number 


Default: 1 定义 slider 从 最 小 值 移动 到 最 大 值 的 单位 步 长 。 在 这 个 指定 范围 (最 小 值 到 最 大 值 ) 
内 的 值 需要 能 被 范围 整除 。Code examples: 


使 用 step 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ step: 5 }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 step 选项 : 
// getter 
var step = $( ".selector" ).slider( "option", "step" ); 


// setter 
$( ".selector" ).slider( "option", "step", 5 ); 


valueType: Number 


Default: o 如 果 只 有 一 个 手柄 则 是 指定 slider 的 value 值 。 如 果 有 多 余 一 个 的 操作 柄 , 则 是 定 
义 第 一 个 操作 柄 的 value 值 。Code examples: 


使 用 value 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ value: 10 }); 


在 组 件 初 始 化 之 后 ， 读 取 或 设置 value 选项 : 


// getter 
var value = $( ".selector" ).slider( "option", "value" ); 


// setter 
$( ".selector" ).slider( "option", "value", 10 ); 


valuesType: Array 


Default: nuii 这 个 选项 可 以 用 来 为 多 个 操作 柄 设 定 value 值 . 如 果 range 设置 为 true ， 
'values' 的 长 度 最 少 应 为 2, Code examples: 


使 用 values 选项 初始 化 滑 块 组 件 : 


$( ".selector" ).slider({ values: [ 10, 25 ] }); 


在 组 件 初始 化 之 后 ， 读 取 或 设置 values 选项 : 
// getter 
var values = $( ".selector" ).slider( "option", "values" ); 


// setter 
$( ".selector" ).slider( "option", "values", [ 10, 25 ] ); 


Methods 


destroy()Returns: jQuery (plugin only) 

完全 销毁 滑 块 组 件 的 功能 ， 这 将 使 元 素 返 回 它 的 初始 状态 。 
。 这 个 方法 不 接收 任何 参数 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).slider( "destroy" ); 


disable()Returns: jQuery (plugin only) 
禁用 滑 块 组 件 。 

。 这 个 方法 不 接收 任何 参数 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).slider( "disable" ); 


enable()Returns: jQuery (plugin only) 


启用 滑 块 组 件 。 
。 这 个 方法 不 接收 任何 参数 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).slider( "enable" ); 


option( optionName )Returns: Object 
获取 与 optionName 对 应 的 选项 值 。 

。 optionNameType: String 要 获取 的 值 所 对 应 的 选项 的 名 称 。 
Code examples: 
调用 这 个 方法 : 


var isDisabled = $( ".selector" ).slider( "option", "disabled" ) 


option()Returns: PlainObject 

获取 一 个 包含 有 描述 当前 滑 块 组 件 选 项 哈 希 值 的 键 / 值 对 。 
。 这 个 方法 不 接收 任何 参数 

Code examples: 


调用 这 个 方法 : 


var options = $( ".selector" ).slider( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 


设置 滑 块 组 件 optionName 参数 指定 的 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
。 valueType: Object 要 为 选项 设置 的 参数 值 。 


Code examples: 
调用 这 个 方法 : 


$( ".selector" ).slider( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
设置 一 个 或 多 个 滑 块 组 件 的 选项 值 。 
e optionsType: Object 要 设置 的 选项 名 与 值 之 间 的 映射 关系。 
Code examples: 
调用 这 个 方法 : 


$( ".selector" ).slider( "option", { disabled: true } ) 


value()Returns: Number 
获取 滑 块 组 件 的 值 。 

。 这 个 方法 不 接收 任何 参数 
Code examples: 


调用 这 个 方法 : 


var selection = $( ".selector" ).slider( "value" ); 


value( value )Returns: jQuery (plugin only) 
设置 滑 块 组 件 的 值 。 
e valueType: Number 用 来 设置 的 值 
Code examples: 
调用 这 个 方法 : 


$( ".selector" ).slider( "value", 55 ); 


values()Returns: Array 


获取 所 有 手柄 的 值 . RAGE : 适用 于 多 手柄 的 滑 块 ) 


。 这 个 方法 不 接收 任何 参数 
Code examples: 
调用 这 个 方法 : 


var values = $( ".selector" ).slider( "values" ); 


values( index )Returns: Number 

获取 指定 手柄 的 值 。 ( 轧 人 码头 注 : 适用 于 多 手柄 的 滑 块 ) 
。 indexType: Integer 从 0 开始 计数 的 手柄 索引 值 。 

Code examples: 


调用 这 个 方法 : 


var value = $( ".selector" ).slider( "values", 0 ); 


values( index, value )Returns: jQuery (plugin only) 


设置 指定 手柄 的 值 。 〈 电 人 码头 注 : 适用 于 多 手柄 的 滑 块 ) 


e indexType: Integer 从 0 开始 计数 的 手柄 索引 值 。 
e valueType: Number 要 设置 的 值 


Code examples: 


调用 这 个 方法 : 


$( ".selector" ).slider( "values", 0, 55 ); 


values( values )Returns: jQuery (plugin only) 
设置 所 有 手柄 的 值 。 (RAGKE : 适用 于 多 手柄 的 滑 块 ) 
e valuesType: Array 要 设置 的 值 。 
Code examples: 
调用 这 个 方法 : 


$( ".selector" ).slider( "values", [ 55, 105 ] ); 


widget()Returns: jQuery 
返回 一 个 滑 块 元 素 的 jquery 对 象 。 
。 这 个 方法 不 接收 任何 参数 
Code examples: 
调用 widget 方法 : 


var widget = $( ".selector" ).slider( "widget" ); 


Events 


change( event, ui )Type: slidechange 


当 用 户 滑动 一 个 手柄 后 ， 如 果 滑 块 的 值 改变 了 ， 就 会 触发 这 个 事件 ; 或 者 通过 value 方法 改 
变 手柄 值 。 


e eventType: Event 

e uiType: Object 
o handleType: jQuery 一 个 jQuery 对 象 ， 表 示 被 改变 的 手柄 
o valueType: Number 当 前 滑 块 的 值 。 


Code examples: 


使 用 change EA Eq 26 38 eS: 


$( ".selector" ).slider({ 
change: function( event, ui ) (3 


3); 


绑 定 事件 侦 听 器 到 slidechange 事 件 : 


$( ".selector" ).on( "slidechange", function( event, ui ) {} ); 


create( event, ui )Type: slidecreate 


当 滑 块 组 件 被 创建 时 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的， 但 是 为 了 与 其 它 元 素 保 持 一 直 ， 它 总 是 被 包含 。 


Code examples: 


使 用 create 回调 函数 指定 事件 : 


$( ".selector" ).slider({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 slidecreate 事件 : 


$( ".selector" ).on( "slidecreate", function( event, ui ) {} ); 


slide( event, ui )Type: slide 


这 个 事件 鼠标 滑动 滑 块 时 触发 。 ui.value 作为 提供 给 事件 的 价值 ， 表 示 将 作为 该 当前 移动 手 
柄 的 结果 值 。 取消 该 事件 会 阻止 手柄 移动 和 手柄 将 继续 其 先前 的 值 。 取 消 该 事件 会 阻止 手柄 
移动 并 且 手 柄 将 继续 其 先前 的 值 。 


e eventType: Event 

e uiType: Object 
o handleType: jQuery 一 个 jQuery 对 象 ， 表 示 当 前 移动 的 手柄 
o valueType: Number 如 果 事 件 没有 被 取消 ， 该 手柄 将 移动 到 值 。 
o valuesType: Array 一 个 多 手柄 滑 块 当前 值 的 数组 。 


Code examples: 


使 用 slide 回调 西数 指定 事件 : 


$( ".selector" ).slider({ 
slide: function( event, ui ) {} 


3) 


绑 定 一 个 事件 监听 器 到 slide 事件 : 


$( ".selector" ).on( "slide", function( event, ui ) {} ); 


start( event, ui )Type: slidestart 
当 用 户 开始 滑动 滑 块 时 触发 。 


e eventType: Event 

e uiType: Object 
o handleType: jQuery 一 个 jQuery 对 象 ， 表 示 当 前 移动 的 手柄 
o valueType: Number 滑 块 的 当前 值 


Code examples: 


使 用 start Eha ads XE SR AT: 


$( ".selector" ).slider({ 
start: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 slidestart 事件 : 


$( ".selector" ).on( "slidestart", function( event, ui ) {} ); 


stop( event, ui )Type: slidestop 
当 用 户 滑动 滑 块 后 触发 。 


e eventType: Event 

e uiType: Object 
o handleType: jQuery 一 个 jQuery 对 象 ， 表 示 移 动 后 手柄 。 
o valueType: Number 滑 块 的 当前 值 


Code examples: 


使 用 stop 回调 函数 指定 事件 : 


$( ".selector" ).slider({ 
stop: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 slidestop 事件 : 


$( ".selector" ).on( "slidestop", function( event, ui ) {} ); 


Example: 


一 个 简单 的 jQuery UI 383% (Slider) 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>slider demo</title> 
<link rel="stylesheet" hrefz"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
<style>#slider { margin: 10px; } </style> 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«div id="slider"></div> 
<script> 
$( "#slider" ).slider(); 


</script> 


</body> 
</html> 


E Se. 





Spinner Widget 


Categories: Widgets 


version added: 1.9 


Description: 通过 向 上 /向 下 按钮 和 箭头 按键 操作 ， 增 强 文 本 输入 框 的 数值 输入 功能 。 


QuickNavExamples 


Options 


e culture 

e disabled 

e icons 

e incremental 

e max 

e min 

e numberFormat 
e page 

e step 


Methods 


e destroy 

e disable 

e enable 

e option 

e pageDown 
e pageUp 

e stepDown 
e stepUp 

e value 


e widget 


Extension Points 


e  buttonHtml 


e  uiSpinnerHtml 


Events 


e change 
e create 
e spin 

e start 

e stop 


spinner (微调 组 件 ) ， 或 数 步 进 控件 (number stepper widget) ， 是 用 于 处 理 各 种 数字 输入 
ASCE. CA rr ERALA 48, BBA. BU. AAAA -SABAN 
值 。 当 与 全 球 化 (Globalize) 结合 时 ， 您 甚至 可 以 微调 显示 不 同 地 区 的 货币 和 日 期 。 


spinner (微调 组 件 ) 使 用 两 个 按钮 将 文本 输入 覆盖 为 当前 值 的 递增 值 和 递减 值 。spinner ( 微 
调 组 件 ) 增加 了 按键 事件 ， 以 便 可 以 用 键 瘟 完成 相同 的 递增 和 递减 。spinner (微调 组 件 ) 代 
表 全 球 化 (Globalize) 的 数字 格式 和 解析 。 


键盘 交互 (Keyboard interaction) 


e UP: 对 值 增加 一 步 。 

e DOWN : 对 值 减少 一 步 

e PAGE UP : xD a 
。 PAGE DOWN : 对 值 减少 一 


用 鼠标 点 击 微调 按钮 后 ， 焦 点 仍 停 留 在 文本 域 中 。 


当 spinner (微调 组 件 ) 不 是 只 读 〈 &lt;input readonly&gt; ) 时 ， 用 户 可 以 输入 值 ， 这 可 能 
会 产生 无 效 的 值 (小 于 最 小 值 ， 大 于 最 大 值 ， 增 减 错 配 ， 非 数字 输入 ) 。 当 增 减 时 ， 不 管 通 
过 编程 方式 还 是 微调 按钮 方式 ， 值 都 会 被 强制 为 一 个 有 效 值 ( 如 需 了 解 详情 ， 请 查看 
stepUp() #0 stepDown( ) 的 描述 。 


主题 (Theming) 


spinner (微调 组 件 ) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 要 使 用 
spinner (微调 组 件 ) 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class T : 


e ui-spinner : spinner (微调 组 件 ) 的 外 层 容器 。 
o ui-spinner-input : spinner (微调 组 件 ) 实例 化 的 &lt;input&gt; 元 素 。 
© ui-spinner-button : 用 于 递增 或 递减 spinner (微调 组 件 ) 值 的 按钮 控件 。 向 上 按钮 
会 另外 带 有 一 个 ui-spinner-up class， 向 下 按钮 会 另外 带 有 一 个 ui-spinner-down 
class。 


依赖 (Dependencies) 


e Ul 核心 (UI Core) 

e 部 件 库 (Widget Factory) 

e 按钮 部 件 (Button Widget) 

e 全 球 化 (Globalize) (外 部 的 ， 可 选 的 ; SS culture 和 numberFormat 选项 一 起 使 用 
ay ) 


Additional Notes: 


e 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定 义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 

e 该 部 件 以 编程 方式 操作 元 素 的 值 ， 因 此 当 元 素 的 值 改 变 时 不 会 触发 原生 的 change 事 
件 。 

e 不 支持 在 &lt;input type="number"agt; 上 创建 选择 器 ， 因 为 会 造成 与 本 地 spinner (微调 
组 件 ) BY UI 冲突 。 


Options 


cultureType: String 


Default: null 设置 culture 选项 用 于 解析 和 格式 化 值 。 如 果 为 null, {E Globalize 下 当前 
设置 的 culture 将 被 使 用 ， 可 供 的 culture ， 请 查看 Globalize 文档 。 RAY numberFormat 选 
项 设置 了 ， 才 会 有 关联 。 需要 引用 Globalize。Code examples: 


初始 化 带 有 指定 culture 选项 的 spinner : 


$( ".selector" ).spinner({ culture: "fr" }); 


在 初始 化 后 ， 获 取 或 设置 culture 选项 : 


// getter 
var culture = $( ".selector" ).spinner( "option", "culture" ); 


// setter 
$( ".selector" ).spinner( "option", "culture", "fr" ); 


disabledType: Boolean 
Default: false 如 果 设 置 为 true ， 则 禁用 该 spinner (微调 组 件 ) . Code examples: 


初始 化 带 有 指定 disabled 选项 的 spinner : 


$( ".selector" ).spinner({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).spinner( "option", "disabled" ); 


// setter 
$( ".selector" ).spinner( "option", "disabled", true ); 


iconsType: Object 


Default: { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" } 标题 要 使 用 的 图 标 ， 
与 jQuery UI CSS 框架 提供 的 图 标 (Icons) 匹配 。 设 置 为 false 则 不 显示 图 标 。 


e up (string, default: "ui-icon-triangle-1-n") 
e down (string, default: "ui-icon-triangle-1-s") 


Code examples: 
初始 化 带 有 指定 icons 选项 的 spinner : 

$( ".selector" ).spinner(( icons: { down: "custom-down-icon", up: "custom-up-icon" j }); 
E E 
在 初始 化 后 ， 获 取 或 设置 icons 选项 : 


// getter 
var icons = $( ".selector" ).spinner( "option", "icons" ); 


// setter 
$( ".selector" ).spinner( "option", "icons", ( down: "custom-down-icon", up: "custom-up-i 





incrementalType: Boolean or Function( Integer count ) 


Default: true 当 按 住 spinner (微调 组 件 ) 按钮 不 放 时 ， 控 制 的 步 数 。 支 持 多 个 类 型 : 


。 Boolean: 如 果 设 置 为 true ， 当 按 住 spinner (微调 组 件 ) 按钮 不 放 时 ， 数 值 会 根 
据 step 选项 的 值 不 断 的 增加 或 减少 。 当 设置 为 false 时 ， 所 有 步骤 都 是 相等 的 ， 
(由 step 选项 所 定义 ) | (BAG SUE : 点 一 下 ， 数 值 会 根据 step 选项 的 值 增加 或 减少 
一 步 ) 。 
e Function: 接收 一 个 参数 : 已 发 生 的 自 旋 数 。 必须 返回 在 当前 发 生 的 微调 的 步 数 。 


Code examples: 


初始 化 带 有 指定 incremental 选项 的 spinner : 


$( ".selector" ).spinner({ incremental: false }); 


在 初始 化 后 ， 获 取 或 设置 incremental 选项 : 


// getter 
var incremental = $( ".selector" ).spinner( "option", "incremental" ); 


// setter 
$( ".selector" ).spinner( "option", "incremental", false ); 


maxType: Number or String 


Default: null 人 允许 的 最 大 值 。 如 果 元 素 的 max 属性 存在 ， 该 选项 未 明确 设置 ， 那 么 该 元 素 
的 max 属性 就 被 用 作 该 选项 的 值 。 如 果 为 null1 ， 表 示 没 有 上 限 。 支 持 多 个 类 型 : 


。 Number: 最 大 值 。 
e String: 如 果 应 用 包含 了 Globalize， max 选项 可 以 传递 可 以 被 
numberFormat 和 culture 选项 解析 的 字符 串 。 否则 求助 原生 的 parseFloat() 将 方法 。 


Code examples: 


初始 化 带 有 指定 max 选项 的 spinner : 


$( ".selector" ).spinner({ max: 50 }); 


在 初始 化 后 ， 获 取 或 设置 max 选项 : 


// getter 
var max = $( ".selector" ).spinner( "option", "max" ); 


// setter 
$( ".selector" ).spinner( "option", "max", 50 ); 


minType: Number or String 


Default: null 人 允许 的 最 小 值 。 如 果 元 素 的 min 属性 存在 ， 该 选项 未 明确 设置 ， 那 么 该 元 素 
的 min 属性 就 被 用 作 该 选项 的 值 。 如 果 为 null1 ， 表 示 没 有 下 限 。 支 持 多 个 类 型 : 


e。 Number: 最 小 值 。 

e String: 如 果 应 用 包含 了 Globalize， max 选项 可 以 传递 可 以 被 
numberFormat 和 culture 选项 解析 的 FAB. 否则 使 用 原生 的 parseFloat() 方法 解 
析 。 


Code examples: 


初始 化 带 有 指定 min 选项 的 spinner : 


$( ".selector" ).spinner({ min: © }); 


在 初始 化 后 ， 获 取 或 设置 min 选项 : 
// getter 
var min = $( ".selector" ).spinner( "option", "min" ); 


// setter 
$( ".selector" ).spinner( "option", "min", © ); 


numberFormatType: String 


Default: null 通过 Globalize 格式 化 数字 ， 如 果 有 效 的 话 。 最 常见 的 用 于 "a" 用 作 十 进 制 
数 和 "c" 用 作 货 币值 。 也 看 到 了 culture 选择 。Code examples: 


初始 化 带 有 指定 numberFormat 选项 的 spinner : 


$( ".selector" ).spinner({ numberFormat: "n" 3); 


在 初始 化 后 ， 获 取 或 设置 numberFormat 选项 : 
// getter 
var numberFormat = $( ".selector" ).spinner( "option", "numberFormat" ); 


// setter 
$( ".selector" ).spinner( "option", "numberFormat", "n" ); 


pageType: Number 
Default: 10 当 通 过 pageup / pageDown 的 方法 进行 分 页 时 ， 采 取 的 步 数 。Code examples: 
初始 化 带 有 指定 page 选项 的 spinner : 


$( ".selector" ).spinner({ page: 5 }); 


在 初始 化 后 ， 获 取 或 设置 page 选项 : 


// getter 
var page = $( ".selector" ).spinner( "option", "page" ); 


// setter 
$( ".selector" ).spinner( "option", "page", 5 ); 


stepType: Number or String 


Default: 1 通过 按钮 或 stepup() / stepdown() 方法 微调 时 ， 采 取 的 步 数 。 如 果 元 素 
的 step 属性 存在 ， 并 且 该 选项 未 明确 设置 ， 那 么 元 素 的 step 属性 值 将 作为 该 选项 的 值 使 
用 。 支 持 多 个 类 型 : 


e Number: 步 数 

e String: 如 果 应 用 包含 了 Globalize， max 选项 可 以 传递 可 以 被 
numberFormat 和 culture 选项 解析 的 FRB. 否则 使 用 原生 的 parseFloat() 方法 解 
析 。 


Code examples: 


初始 化 带 有 指定 step 选项 的 spinner : 


$( ".selector" ).spinner({ step: 2 }); 


在 初始 化 后 ， 获 取 或 设置 step 选项 : 
// getter 
var step = $( ".selector" ).spinner( "option", "step" ); 


// setter 
$( ".selector" ).spinner( "option", "step", 2 ); 


Methods 


destroy()Returns: jQuery (plugin only) 

完全 移 除 spinner 功 能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).spinner( "destroy" ); 


disable()Returns: jQuery (plugin only) 
禁用 spinner. 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).spinner( "disable" ); 


enable()Returns: jQuery (plugin only) 


启用 spinner. 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).spinner( "enable" ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionname 关联 的 值 。 

e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 
调用 该 方法 : 


var isDisabled = $( ".selector" ).spinner( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 spinner 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).spinner( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 


设置 与 指定 的 optionName 关联 的 spinner 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 
调用 该 方法 : 


$( ".selector" ).spinner( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 spinner 设置 一 个 或 多 个 选项 。 

e optionsType: Object 要 设置 的 option-value xt. 
Code examples: 


调用 该 方法 : 


$( ".selector" ).spinner( "option", { disabled: true } ); 


pageDown( [pages ] )Returns: jQuery (plugin only) 


通过 指定 页 数 递减 值 ， 页 数 由 page 选项 定义 。 如 果 没 有 参数 ， 单 页 递减 。 


如 果 返 回 值 大 于 max 选项 定义 的 值 ， 小 于 min 选项 定义 的 值 ， 或 返回 的 结果 步 数 不 匹 配 ， 


么 该 值 将 被 调整 到 最 接近 的 有 效 值 。 

调用 pagepown() 将 引起 start , spin ,和 stop 事件 被 触发 。 
e pagesType: Number 递 减 的 页 数 ， 默 认 是 1. 

Code examples: 


调用 pageDown 方法 : 


$( ".selector" ).spinner( "pageDown" ); 


pageUp( [pages ] )Returns: jQuery (plugin only) 
通过 指定 页 数 递增 值 ， 页 数 由 page 选项 定义 。 如 果 没 有 参数 ， 单 页 递增 


如 果 返 回 值 大 于 max 选项 定义 的 值 ， 小 于 min 选项 定义 的 值 ， 或 返回 的 结果 步 数 不 匹配 ， 


么 该 值 将 被 调整 到 最 接近 的 有 效 值 。 
调用 pageup() 将 引起 start ，spin ,和 stop 事件 被 触发 。 


e pagesType: Number 递 增 的 页 数 ， 默 认 是 1. 


AR 


那 


Code examples: 


调用 pageUp 方法 : 


$( ".selector" ).spinner( "pageUp", 10 ); 


stepDown( [steps ] )Returns: jQuery (plugin only) 
通过 指定 步 数 递减 值 ， 步 数 由 step 选项 定义 。 如 果 没 有 参数 ， 单 步 递减 。 


如 果 返 回 值 大 于 max 选项 定义 的 值 ， 小 于 min 选项 定义 的 值 ， 或 返回 的 结果 步 数 不 匹配 ， 那 
么 该 值 将 被 调整 到 最 接近 的 有 效 值 。 


调用 stepbown() 将 引起 start , spin ,和 stop 事件 被 触发 。 
e stepsType: Number 递 减 的 步 数 ， 默 认 是 1. 
Code examples: 


调用 stepDown 方法 : 


$( ".selector" ).spinner( "stepDown" ) 


stepUp( [steps ] )Returns: jQuery (plugin only) 
通过 指定 步 数 递增 值 ， 步 数 由 step 选项 定义 。 如 果 没 有 参数 ， 单 步 递增 。 


如 果 返 回 值 大 于 max 选项 定义 的 值 ， 小 于 min 选项 定义 的 值 ， 或 返回 的 结果 步 数 不 匹配 ， AB 
么 该 值 将 被 调整 到 最 接近 的 有 效 值 。 


调用 pageup() 将 引起 start , spin ,和 stop 事件 被 触发 。 
e stepsType: Number 递 增 的 步 数 ， 默 认 是 1. 
Code examples: 


调用 stepUp 方法 : 


$( ".selector" ).spinner( "stepUp", 5 ); 


value()Returns: Number 


获取 当前 数值 ， 这 个 值 是 基于 numberrormat 和 culture 选项 解析 的 。 
。 该 方法 不 接受 任何 参数 。 


Code examples: 
调用 该 方法 : 


var value = $( ".selector" ).spinner( "value" ); 


value( value )Returns: jQuery (plugin only) 
设置 当前 值 


e valueType: Number or String 用 来 设置 的 值 。 如 果 传 递 的 是 一 个 字符 串 ， 那 么 这 个 值 是 
基于 numberFormat 和 culture 选项 解析 的 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).spinner( "value", 50 ); 


widget()Returns: jQuery 

返回 包含 生成 组 件 包 庄 元 素 的 一 个 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).spinner( "widget" ); 


扩展 点 (Extension Points) 


spinner (微调 组 件 ) 是 widget factory 构 建 的 ， 并 且 可 以 扩展 。 当 扩 展 部 件 时 ， 你 必须 覆盖 
或 添加 新 的 行为 到 现 有 的 方法 。 下 列 方法 被 提供 作为 扩展 点 用 相同 的 API 稳 定性 如 上 所 列 的 
plugin methods, 有 关 小 部 件 扩展 的 更 多 信息 ， 请 参阅 使 用 Widget Factory 扩展 小 部 件 。 


_buttonHtml()Returns: String 


这 个 方法 返回 的 HTML 用 于 spinner (微调 组 件 ) 的 递增 和 递减 按钮 。 每 个 按钮 都 必须 给 定 一 
个 ui-spinner-button 的 类 名 用 于 相关 联 的 事件 工作 。 


。 该 方法 不 接受 任何 参数 。 


Code examples: 


使 用 &lt;button&gt; 元 素 作为 递增 和 递减 按钮 。 


_buttonHtml: function() 1 
return "" + 
"«button class-'ui-spinner-button ui-spinner-up'>" + 
"<span class-'ui-icon " + this.options.icons.up + "'>&#9650;</span>" + 
"</button>" + 
"<button class='ui-spinner-button ui-spinner-down'>" + 
"<span class='ui-icon " + this.options.icons.down + "'>&#9660;</span>" + 
"</button>"; 


_uiSpinnerHtml()Returns: String 

这 个 方法 返回 的 HTML 用 于 包 襄 spinner. (微调 组 件 ) | «input» 元 素 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


用 没有 圆 角 的 &lt;divagt; AX spinner. (微调 组 件 ) 。 


.uiSpinnerHtml: function() { 
return "<div class-'ui-spinner ui-widget ui-widget-content'></div>"; 


} 


Events 


change( event, ui )Type: spinchange 
当 spinner 微 调 器 的 值 改 变 并 且 输 入 元 素 (input) 失去 焦点 时 ， 该 事件 触发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 change 回调 的 spinner (微调 器 ) 


$( ".selector" ).spinner({ 
change: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 spinchange 事件 : 


$( ".selector" ).on( "spinchange", function( event, ui ) {} ); 


create( event, ui )Type: spincreate 


当 spinner 微 调 器 创建 的 时 候 ， 该 时 间 触 发 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 spinner (微调 器 ) 


$( ".selector" ).spinner({ 
create: function( event, ui ) (3 


3); 


绑 定 一 个 事件 监听 器 到 spincreate 事件 : 


$( ".selector" ).on( "spincreate", function( event, ui ) {} ); 


spin( event, ui )Type: spin 
在 递增 /递减 的 时 候 ， 该 事件 触发 〈 用 当前 值 和 ui.value 比较 来 确定 的 微调 的 方向 ) o 
可 以 取消 ， 以 防止 被 更 新 值 。 


e eventType: Event 
e uiType: Object 
o valueType: Number 要 设置 的 新 值 ， 除 非 该 事件 被 取消 。/div> 


Code examples: 


初始 化 带 有 指定 spin 回调 的 spinner (微调 器 ) 


$( ".selector" ).spinner({ 
spin: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 spin 事件 : 


$( ".selector" ).on( "spin", function( event, ui ) {} ); 


start( event, ui ) Type: spinstart 


微调 开始 之 前 ， 触 发 该 事件 。 可 以 取消 ， 以 防止 微调 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 start 回调 的 spinner. (微调 器 ) 


$( ".selector" ).spinner({ 
start: function( event, ui ) {} 


}); 


绑 定 一 个 事件 监听 器 到 spinstart 事件 : 


$( ".selector" ).on( "spinstart", function( event, ui ) {} ); 


stop( event, ui )Type: spinstop 


微调 结束 后 ， 触 发 该 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 stop 回调 的 spinner (微调 器 ) 


$( ".selector" ).spinner({ 
stop: function( event, ui ) {} 


1 


绑 定 一 个 事件 监听 器 到 spinstop 事件 : 


$( ".selector" ).on( "spinstop", function( event, ui ) {} ); 


Example: 


普通 的 数字 微调 器 。 


<!doctype html» 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>spinner demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


«input id="spinner'"> 
<script> 
$( "#spinner" ).spinner(); 


</script> 


</body> 
</html> 


JE 





Tabs Widget 


Categories: Widgets 


version added: 1.0 


Description: 一 种 多 panel (面板 ) 的 单 内 容 区 ， 每 个 panel (面板 ) 与 列表 中 的 标题 相关 。 


QuickNavExamples 


Options 


e active 

e collapsible 
e disabled 

e event 

e heightStyle 
e hide 

e show 


Methods 


e destroy 
e disable 
e enable 
e load 

e option 

e refresh 
e widget 


Events 


e activate 

e beforeActivate 
e beforeLoad 

e create 

e load 


AF (Tabs) 通常 用 于 把 内 容 分 成 多 个 部 分 ， 以 便 节 省 空间 ， 就 像 折 和 登 面板 (accordion) 
一 样 。 


选项 卡 (Tabs) 有 一 组 必须 使 用 的 特定 标记 ， 以 便 选 项 卡 能 正常 工作 : 


e 选项 卡 (Tabs) 必须 在 一 个 有 序 的 (&lt;ol&gt; ) 或 无 序 的 ( &lt;ul&gt; ) 列表 中 

e 每 个 选项 卡 的 "title" 必须 在 一 个 列表 项 ( alt;liagt; ) 的 内 部 ， 且 必须 用 一 个 带 有 
href 属性 的 锚 ( alt;aagt; ) DR. 

。 每 个 选项 卡 panel (mik) 可 以 是 任意 有 效 的 元 素 ， 但 是 它 必须 带 有 一 个 id， 该 id 与 相关 
选项 卡 的 锚 中 的 哈 希 相对 应 。 


每 个 选项 卡 panel (面板 ) 的 内 容 可 以 在 页 面 中 定义 好 ， 或 者 可 以 通过 Ajax 加 载 。 这 两 种 方 
式 都 是 基于 与 选项 卡 相 关 的 锚 的 href 上 自动 处 理 的 。 上 默认 情况 下 ， 选 项 卡 在 点 击 时 激活 ， 
但 是 通过 ”event 选项 可 以 改变 或 覆盖 事件 。 


下 面 是 一 些 样品 标记 : 


<div id="tabs"> 
<ul> 
<li><a href="#fragment -1">One</a></1li> 
<li><a href="#fragment -2">Two</a></1li> 
<li><a href="#fragment -3">Three</a></1li> 
</ul> 
«div id="fragment-1"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism 
</div> 
«div id="fragment-2"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism 
</div> 
«div id="fragment-3"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism 
</div> 


</div> 





键盘 交互 (Keyboard interaction) 


当 焦 点 在 选项 卡 上 时 ， 下 面 的 键盘 命令 可 用 : 


e UP/LEFT : 移动 焦点 到 上 一 个 选项 卡 。 如 果 在 第 一 个 选项 卡 上 ， 则 移动 焦点 到 最 后 一 个 
选项 卡 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 选项 卡 。 

。 DOWNRIGHT : 移动 焦点 到 下 一 个 选项 卡 。 如 果 在 最 后 一 个 选项 卡 上 ， 则 移动 焦点 到 第 
一 个 选项 卡 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 选项 卡 。 

e HOME : 移动 焦点 到 第 一 个 选项 卡 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 选项 卡 。 

。 END: 移动 焦点 到 最 后 一 个 选项 卡 。 在 一 个 短暂 的 延迟 后 激活 获得 焦点 的 选项 卡 。 

e SPACE : 激活 与 获得 焦点 的 选项 卡 相 关 的 panel (面板 ) 。 

e ENTER : 激活 或 切换 与 获得 焦点 的 选项 卡 相 关 的 panel (面板 ) 。 

e ALT+PAGE UP : 移动 焦点 到 上 一 个 选项 卡 ， 并 立即 激活 。 

。 ALT+PAGE DOWN : 移动 焦点 到 下 一 个 选项 卡 ， 并 立即 激活 。 


当 焦点 在 panel (面板 ) 上 时 ， 下 面 的 键盘 命 全 可 用 : 


。 CTRL+UP : 移动 焦点 到 相关 的 选项 卡 。 
。 ALT+PAGE UP : 移动 焦点 到 上 一 个 选项 卡 ， 并 立即 激活 。 
。 ALT+PAGE DOWN : 移动 焦点 到 下 一 个 选项 卡 ， 并 立即 激活 。 


主题 (Theming) 


选项 卡 部 件 (Tabs Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 
要 使 用 选项 卡 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-tabs : 选项 卡 的 外 层 容器 。 当 设置 了 collapsible 选项 时 ， 该 元 素 会 另外 带 有 一 个 
ui-tabs-collapsible Class. 
o ui-tabs-nav : 选项 卡 列 表 。 
a 导航 中 激活 的 列表 项 会 带 有 一 个 ui-tabs-active Class. 内 容 通过 Ajax 调用 加 
载 的 列表 项 会 带 有 一 个 ui-tabs-loading class. 
m ui-tabs-anchor : 用 于 切换 panel (面板 ) 的 锚 。 
o ui-tabs-panel : 与 选项 卡 相 关 的 panel (面板 ) 。 只 有 和 与 其 对 应 的 选项 卡 激活 时 才 
可 见 。 


依赖 (Dependencies) 


e Ul 核心 (UI Core) 
e 部 件 库 (Widget Factory) 
e 特效 核心 (Effects Core) (可 选 的 ; 44 show 和 hide 选项 一 起 使 用 时 ) 


Additional Notes: 


。 该 部 件 要 求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


Options 


activeType: Boolean or Integer 
Default: o 当前 打开 哪 一 个 panel (面板 ) 。 支 持 多 个 类 型 : 


e Boolean: 设 置 active 为 false 将 折 且 所 有 的 panel (面板 ) 。 这 要 求 collapsible 选 
项 必须 为 true o 

e Integer: 激活 打开 的 panel (面板 ) 索引 ， 以 需 为 基础 。 负 值 则 表示 从 最 后 一 个 panel ( 面 
AR) 后 退 选 择 panel (面板 ) 。 


Code examples: 
初始 化 带 有 指定 active 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ active: 1 }); 


在 初始 化 后 ， 获 取 或 设置 active 选项 : 
// getter 
var active = $( ".selector" ).tabs( "option", "active" ); 


// setter 
$( ".selector" ).tabs( "option", "active", 1 ); 


collapsibleType: Boolean 
Default: false 当 设 置 为 true 时 ， 激 活 的 panel (面板 ) 可 以 被 关闭 。Code examples: 


初始 化 带 有 指定 collapsible 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ collapsible: true }); 


在 初始 化 后 ， 获 取 或 设置 collapsible 选项 : 


// getter 
var collapsible = $( ".selector" ).tabs( "option", "collapsible" ); 


// setter 
$( ".selector" ).tabs( "option", "collapsible", true ); 


disabledType: Boolean or Array 


Default: false 哪些 标签 被 禁用 。 支 持 多 个 类 型 : 


e Boolean: 启用 或 禁用 所 有 选项 卡 。 
e Array: 一 个 数组 。 包 含 从 需 开 始 计 数 的 应 该 禁用 选项 卡 的 索引 ， 例 如 ， [ 6，2 ] 将 禁用 
第 一 和 第 三 个 选项 卡 。 


Code examples: 


初始 化 带 有 指定 disabled 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ disabled: [ 0, 2 ] }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).tabs( "option", "disabled" ); 


// setter 
$( ".selector" ).tabs( "option", "disabled", [ 0, 2 ] ); 


eventType: String 


Default: "click" 激活 选项 卡 的 事件 类 型 。 BAS (hover) 激活 选项 卡 ， 
FA "mouseover" 。Code examples: 


初始 化 带 有 指定 event 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ event: "mouseover" }); 


在 初始 化 后 ， 获 取 或 设置 event 选项 : 


// getter 
var event = $( ".selector" ).tabs( "option", "event" ); 


// setter 
$( ".selector" ).tabs( "option", "event", "mouseover" ); 


heightStyleType: String 


e 


Default: "content" 控制 Tab (选项 卡 ) 部 件 和 每 个 panel (面板 ) 的 高 度 。 可 能 值 : 


e "auto" : 所 有 的 panel (面板 ) 将 会 被 设置 为 最 高 的 panel (面板 ) 的 高 度 。 
e "fill": 基于 tabs 的 父 元 素 的 高 度 ， 扩 展 到 可 用 的 高 度 。 
e "content" : 每 个 panel (面板 ) 的 高 度 取 决 于 它 的 内 容 。 


Code examples: 


初始 化 带 有 指定 heightstyle 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ heightStyle: "fill" 3); 


在 初始 化 后 ， 获 取 或 设置 neightstyle 选项 : 


// getter 
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" ); 


// setter 
$( ".selector" ).tabs( "option", "heightStyle", "fill" ); 


hideType: Boolean or Number or String or Object 


Default: nuii panel (面板 ) 隐藏 时 的 动画 效果 。 支 持 多 个 类 型 : 


e Boolean: 当 设 置 为 false ， 将 不 使 用 动画 效果 ， 该 panel (Mix) 会 立即 被 隐藏 。 如 果 
设置 为 true ， 该 panel (面板 ) 将 会 以 默认 的 持续 时 间 和 默认 的 效果 淡出 。 

e Number: panel (面板 ) 将 以 指定 的 时 间 和 默认 的 效果 淡出 。 

e String: 该 panel (Mik) 将 使 用 指定 的 效果 被 隐藏 。 该 值 可 以 是 一 个 jQuery 内 和 置 的 动画 
方法 的 名 称 ， 如 "slideup" ， 或 一 个 jQuery Ul 效果 的 名 称 ， 如 "fola" 。 在 这 两 种 情 
况 下 ， 将 使 用 默认 持续 时 间 和 默认 的 动画 效果 。 

e Object: 如 果 该 值 是 一 个 对 象 ， 那么 effect , delay , duration , 和 easing 可 能 要 提 
供 。 如 果 effect 属性 包含 一 个 jQuery 方法 的 名 称 ， 那么 该 方法 将 被 使 用 ; 否则 它 被 假 
定 为 是 一 个 jQuery UI 的 效果 的 名 称 。 当 使 用 jQuery UI 支持 额外 设置 的 效果 ， 你 可 以 在 
对 象 中 包含 那些 设置 并 且 它 们 将 被 传递 到 的 效果 。 如 果 duration 持续 时 间或 easing [E 
性 被 省 略 ， 那么 默认 值 将 被 使 用 。 如 果 effect 被 省 略 ， 那么 "fadeout" 将 被 使 用 。 如 
果 delay RAM, 那么 将 不 使 用 延迟 。 


Code examples: 


初始 化 带 有 指定 hide 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ hide: { effect: "explode", duration: 1000 } }); 


在 初始 化 后 ， 获 取 或 设置 hide 选项 : 


// getter 
var hide = $( ".selector" ).tabs( "option", "hide" ); 


// setter 
$( ".selector" ).tabs( "option", "hide", { effect: "explode", duration: 1000 } ); 


showType: Boolean or Number or String or Object 
Default: nuii panel (面板 ) 显示 时 的 动画 效果 。 支 持 多 个 类 型 : 


e Boolean: 当 设 置 为 false , 将 不 使 用 动画 效果 ， 该 panel (Mix) 会 立即 被 隐藏 。 如 果 
设置 为 true ， 该 panel (面板 ) 将 会 以 默认 的 持续 时 间 和 默认 的 效果 淡出 。 

e Number: panel (面板 ) 将 以 指定 的 时 间 和 默认 的 效果 淡出 。 

e String: panel (Mix) 将 使 用 指定 的 效果 被 隐藏 。 该 值 可 以 是 一 个 jQuery 内 和 置 的 动画 
方法 的 名 称 ， 如 "slideup" , 或 一 个 jQuery Ul 效果 的 名 称 ， 如 "fola" 。 在 这 两 种 情 
况 下 ， 将 使 用 默认 持续 时 间 和 默认 的 动画 效果 。 

e Object: 如 果 该 值 是 一 人 R, ABA effect , delay , duration ， 和 easing 可 能 要 提 
供 。 如 果 effect 属性 包含 一 个 jQuery 方法 的 名 称 ， 那么 该 方法 将 被 使 用 ; 否则 它 被 假 
定 为 是 一 个 jQuery UI 的 效果 的 名 称 。 当 使 用 jQuery UI 支持 额外 设置 的 效果 ， 你 可 以 在 
对 象 中 包含 那些 设置 并 且 它 们 将 被 传递 到 的 效果 。 如 果 duration 持续 时 间或 easing [E 
性 被 省 略 ， 那么 默认 值 将 被 使 用 。 如 果 effect WAR, 那么 "fadeout" 将 被 使 用 。 如 


R delay MAR, 那么 将 不 使 用 延迟 。 
Code examples: 


初始 化 带 有 指定 show 选项 的 Tab (选项 卡 ) 


$( ".selector" ).tabs({ show: { effect: "blind", duration: 800 } }); 


在 初始 化 后 ， 获 取 或 设置 show 选项 : 
// getter 
var show = $( ".selector" ).tabs( "option", "show" ); 


// setter 
$( ".selector" ).tabs( "option", "show", ( effect: "blind", duration: 800 j ); 


Methods 


destroy()Returns: jQuery (plugin only) 

完全 移 除 Tab (选项 卡 ) 功能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).tabs( "destroy" ); 


disable()Returns: jQuery (plugin only) 


禁用 全 部 的 tabs (选项 卡 ) 。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 
调用 该 方法 : 


$( ".selector" ).tabs( "disable" ); 


disable( index )Returns: jQuery (plugin only) 


禁用 某 个 tabs 〈 选 项 卡 ) 。 选 定 的 选项 卡 不 能 被 禁用 。 要 一 次 禁用 多 个 选项 卡 ， 
置 disabled 选项 : $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ) 


e indexType: Number or String 哪 个 tabs (选项 卡 ) 被 禁用 。 
Code examples: 


调用 该 方法 : 


$( ".selector" ).tabs( "disable", 1 ); 


enable()Returns: jQuery (plugin only) 
启用 全 部 的 tabs (选项 卡 ) 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 
调用 该 方法 : 


$( ".selector" ).tabs( "enable" ); 


enable( index )Returns: jQuery (plugin only) 


启用 某 个 tabs (选项 卡 ) 。 要 一 次 要 启 多 个 选项 卡 ， 可 以 重 置 disabled 属 性 ， 如 : 
$( "#example" ).tabs( "option", "disabled", [] ); . 


e indexType: Number or StringWhich tab to enable. 
Code examples: 


调用 该 方法 : 


$( ".selector" ).tabs( "enable", 1 ); 


load( index )Returns: jQuery (plugin only) 
加 载 远程 选项 卡 的 面板 内 容 。 
e indexType: Number or String 哪 个 tabs 需 要 加 载 


Code examples: 


调用 load 方法 : 


$( ".selector" ).tabs( "load", 1 ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

e optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).tabs( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 tabs 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 该 方法 : 


var options = $( ".selector" ).tabs( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 tabs 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).tabs( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 


A tabs (选项 卡 ) 设置 一 个 或 多 个 选项 。 


e optionsType: Object 要 设置 的 option-value xt, 


Code examples: 
调用 该 方法 : 


$( ".selector" ).tabs( "option", { disabled: true } ) 


refresh()Returns: jQuery (plugin only) 


处 理 任 何在 DOM 中 直接 添加 或 移 除 的 标题 和 面板 ， 并 重新 计算 tabs (选项 卡 ) 的 高 度 。 结 
果 取 决 于 内 容 和 heightstyle 选项 。 


。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 refresh 方法 : 


$( ".selector" ).tabs( "refresh" ); 


widget()Returns: jQuery 

返回 一 个 包含 tabs (选项 卡 ) 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 widget 方法 : 


var widget = $( ".selector" ).tabs( "widget" ); 


Events 


activate( event, ui )Type: tabsactivate 


面板 被 激活 后 触发 (在 动画 完成 之 后 ) 。 如 果 tabs (选项 卡 ) 之 前 是 关闭 的 ， 则 ui.oldTab 
和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 tabs (选项 卡 ) IHS, W) ui.newrab 和 
ui.newPanel 将 是 空 的 jQuery 对 象 。 


注意 : 由 于 activate 事件 只 有 在 面板 激活 时 才能 触发 ， 当 创建 tabs (选项 卡 ) 部 件 时 ， 最 
初 的 面板 不 会 触发 该 事件 。 如 果 您 需要 一 个 用 于 部 件 创 建 的 钓 ， 请 使 用 create 事件 。 


e eventType: Event 
e uiType: Object 


o newTabType: jQuery 刚 被 激活 的 选项 卡 。 
o oldTabType: jQuery 刚 被 取消 激活 的 选项 卡 。 
o newPanelType: jQuery 刚 被 激活 的 面板 。 
o oldPanelType: jQuery 刚 被 取消 激活 的 面板 。 


Code examples: 


初始 化 带 有 指定 activate 回调 的 Tab (选项 卡 面板 ) 


$( ".selector" ).tabs({ 
activate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 tabsactivate 事件 : 


$( ".selector" ).on( "tabsactivate", function( event, ui ) {} ); 


beforeActivate( event, ui )Type: tabsbeforeactivate 


tabs (选项 卡 ) 被 激活 前 直接 触发 。 可 以 取消 以 防止 tabs (选项 卡 ) 被 激活 。 如 果 tabs Gk 
项 卡 ) 当前 是 关闭 的 ， 则 ui.oldTab 和 ui.oldPanel 将 是 空 的 jQuery 对 象 。 如 果 
accordion Ef Æ, W] ui.newrab 和 ui.newPanel 将 是 空 的 jQuery 对 象 。 


e eventType: Event 
e uiType: Object 
o newTabType: jQuery 刚 被 激活 的 选项 卡 。 
o oldTabType: jQuery 刚 被 取消 激活 的 选项 卡 。 
o newPanelType: jQuery 刚 被 激活 的 面板 。 
o oldPanelType: jQuery 刚 被 取消 激活 的 面板 。 


Code examples: 


初始 化 带 有 指定 beforeActivate 回调 的 Tab (选项 卡 面板 ) 


$( ".selector" ) ,tabs({ 
beforeActivate: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 tabsbeforeactivate 事件 : 


$( ".selector" ).on( "tabsbeforeactivate", function( event, ui ) {} ); 


beforeLoad( event, ui )Type: tabsbeforeload 


在 一 个 远程 选项 卡 被 加 载 之 前 ， beforeActivate 事件 之 后 ， 触 发 该 事件 。 可 以 取消 ， 以 防止 
tabs (选项 卡 ) 面板 加 载 内 容 ;虽然 面板 仍然 会 被 激活 。 该 事件 被 触发 Ajax 请 求 发送 之 前 ， 这 
样 可 以 使 用 ui.jqXHR 和 ui.ajaxSettings 修改 。 


注意 : 虽然 ui.ajaxsettings 被 提供 ， 并 且 可 以 被 修改 ， 其 中 的 一 些 设置 已 经 通过 /jQuery 处 
HB. 例如 ，prefilters 已 经 被 应 用 ， data 已 被 人 处理， 还 有 type 已 经 确定 。 ， A 

为 beforesend 作为 jouery.ajax() 的 回调 ， beforeLoad 事件 同时 是 发 生 的 ， 因 此 具有 相同 的 
限制 。 


e eventType: Event 
e uiType: Object 
o tabType: jQuery 正在 加 载 的 选项 卡 。 
o panelType: jQuery 将 Ajax 响应 填充 的 面板 。 
o jqXHRType: jqXHR 被 请 求 内 容 的 jqxHR WR, 
o ajaxSettingsType: Object 用 于 由 jquery.ajax 请 求 内 容 的 设置 。 


Code examples: 


初始 化 带 有 指定 beforeLoad 回调 的 Tab (选项 卡 面板 ) 


$( ".selector" ).tabs({ 
beforeLoad: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 tabsbeforeload 事件 : 


$( ".selector" ).on( "tabsbeforeload", function( event, ui ) {} ); 


create( event, ui )Type: tabscreate 


当 创 建 tabs (选项 卡 ) 时 触发 。 如 果 tabs (Gb 项 卡 ) 是 关闭 的 ， ui.tab 和 ui.panel 将 是 空 
的 jQuery 对 象 。 
e eventType: Event 
e uiType: Object 
o tabType: jQuery 激活 的 选项 卡 
o panelType: jQuery 激活 的 面板 。 


Code examples: 


初始 化 带 有 指定 create 回调 的 Tab (选项 卡 面 板 ) 


$( ".selector" ).tabs({ 
create: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 tabscreate 事件 : 


$( ".selector" ).on( "tabscreate", function( event, ui ) {} ); 


load( event, ui )Type: tabsload 


远程 选项 卡 加 载 后 触发 该 事件 。 


e eventType: Event 
e uiType: Object 
o tabType: jQuery 刚 加 载 的 选项 卡 。 
o panelType: jQuery 刚刚 填充 的 Ajax 响应 的 面板 。 


Code examples: 


初始 化 带 有 指定 load 回调 的 Tab 〈 选 项 卡 面板 ) 


$( ".selector" ).tabs({ 
load: function( event, ui ) {} 


3): 


绑 定 一 个 事件 监听 器 到 tabsload 事件 : 


$( ".selector" ).on( "tabsload", function( event, ui ) {} ); 


Example: 


一 个 简单 的 jQuery Ul 选项 卡 (Tabs) 。 


<!doctype html» 

«html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>tabs demo</title> 


<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 


</head> 
<body> 


<div id="tabs"> 
<ul> 


<li><a href="#fragment -1"><span>One</span></a></1i> 
<li><a href="#fragment -2"><span>Two</span></a></1i> 
<li><a href="#fragment -3"><span>Three</span></a></1li> 


</ul> 
«div id-"fragment-1"» 


<p>First tab is active by default:</p> 
«pre»«code»$( "#tabs" ).tabs(); </code></pre> 


</div> 

«div id="fragment-2"> 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 

</div> 

«div id="fragment-3"> 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 

</div> 

</div> 


<script> 
$( "#tabs" ).tabs(); 
</script> 


</body> 
</html> 
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Tooltip Widget 


Categories: Widgets 


version added: 1.9 


Description: 可 自 定义 的 、 可 主题 化 的 工具 提示 框 ， 蔡 代 原 生 的 工具 提示 框 。 


QuickNavExamples 


Options 


e content 
e disabled 
e hide 

e items 


position 
e show 


tooltipClass 
e track 


Methods 


e close 
e destroy 
e disable 
e enable 
e open 

e option 
e widget 


Events 


e close 
e create 
e open 


工具 提示 框 (Tooltip) 取代 了 原生 的 工具 提示 框 ， 让 它们 可 主题 化 ， 也 人 允许 进行 各 种 自 定义 : 


e 显示 不 仅仅 是 标题 的 其 他 内 容 ， 就 如 内 联 的 脚注 或 通过 Ajax 检索 的 额外 内 容 。 
e 自 定义 定位 ， 例 如 ， 在 元 素 上 居中 工具 提示 框 。 
e. 添加 额外 的 样式 来 定制 警告 或 错误 区 域 的 外 观 。 


默认 使 用 一 个 渐变 的 动画 来 显示 和 隐藏 工具 提示 框 ， 这 种 外 观 与 简单 的 切换 可 见 度 相 比 更 具 
灵性 。 这 可 以 通过 show 和 hide 选项 进行 定制 。 


e items 和 content 选项 需要 保持 同步 。 如 果 您 改变 了 其 中 一 个 ， 您 需要 同时 改变 另 一 


个 
lo 


在 一 般 情况 下 ， 禁 用 的 元 素 不 会 触发 任何 DOM 事件 。 因 此 ， 适 当地 控制 禁用 元 素 的 工具 提示 
框 是 不 可 能 的 ， 因 为 我 们 需要 监听 事件 来 决定 何 时 显示 和 隐藏 工具 提示 框 。 这 就 导致 jQuery 
Ul 不 能 保证 对 附加 到 禁用 元 素 上 的 工具 提示 框 任何 层次 上 的 支持 。 这 意味 着 如 果 您 需要 在 禁 
用 元 素 上 进行 提示 ， 您 可 能 需要 使 用 一 个 原生 的 提示 框 和 jQuery Ul 工具 提示 框 的 混合 物 。 
主题 (Theming) 


工具 提示 框 部 件 (Tooltip Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 
如 果 需 要 使 用 工具 提示 框 指定 的 样式 ， 则 可 以 使 用 下 面 的 CSS class 名 称 : 


e ui-tooltip : 工具 提示 框 的 外 层 容 器 。 
© ui-tooltip-content : 工具 提示 框 的 内 容 。 
ik (Dependencies) 


e Ul 核心 (UI Core) 

e 部 件 库 (Widget Factory) 

e 定位 (Position) 

e 特效 核心 (Effects Core) 〈 可 选 的 ; 44 show 和 hide 选项 一 起 使 用 时 ) 


其 他 注意 事项 (Additional Notes) : 
e 该 部 件 要求 一 些 功能 性 的 CSS， 否 则 将 无 法 工作 。 如 果 您 创建 了 一 个 自 定义 的 主题 ， 请 
使 用 小 部 件 指定 的 CSS 文件 作为 起 点 。 


Options 


contentType: Function() or String 
Default: function returning the title attribute 


tooltip( 工 具 提示 框 ) 的 内 容 。 


当 改 变 这 个 选项 时 ， 你 可 能 还 需要 更 改 items 选项 。 
支持 多 个 类 型 : 


。 Function: 一 个 回调 可 以 是 直接 返回 的 内 容 ， 或 通过 在 内 容 ， 调 用 第 一 个 参数 ， 例 如 ， 
对 于 Ajax 内 容 。 
e String: 一 个 HTML 字 符 串 作为 tooltip( 工 具 提 示 框 ) 的 内 容 。 


Code examples: 


初始 化 带 有 指定 content 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ content: "Awesome title!" }); 


在 初始 化 后 ， 获 取 或 设置 content 选项 : 


// getter 
var content = $( ".selector" ).tooltip( "option", "content" ); 


// setter 
$( ".selector" ).tooltip( "option", "content", "Awesome title!" ); 


disabledType: Boolean 


Default: false 如 果 设 置 为 true ， 则 禁用 该 tooltip (工具 提示 框 ) , Code examples: 


初始 化 带 有 指定 disabled 选项 的 tooltip( 工 具 提 示 框 ) : 


$( ".selector" ).tooltip({ disabled: true }); 


在 初始 化 后 ， 获 取 或 设置 disabled 选项 : 


// getter 
var disabled = $( ".selector" ).tooltip( "option", "disabled" ); 


// setter 
$( ".selector" ).tooltip( "option", "disabled", true ); 


hideType: Boolean or Number or String or Object 
Default: true tooltip( 工 具 提 示 框 ) 关 闭 (隐藏 〉 时 的 动画 效果 。 支 持 多 个 类 型 : 


e Boolean: 当 设 置 为 false ， 将 不 使 用 动画 效果 ， 该 tooltip( 工 具 提 示 框 ) 会 立即 被 隐藏 。 
如 果 设置 为 true, 该 tooltip( 工 具 提 示 框 ) 将 会 以 默认 的 持续 时 间 和 默认 的 效果 淡出 。 

e Number: 该 tooltip( 工 具 提 示 框 ) 将 以 指定 的 时 间 和 默认 的 效果 淡出 。 

e String: 该 tooltip( 工 具 提 示 框 ) 将 使 用 指定 的 效果 被 隐藏 。 该 值 可 以 是 一 个 jQuery 内 置 的 
动画 方法 的 名 称 ， 如 "slideup" ， 或 一 个 jQuery Ul 效果 的 名 称 ， 如 "fola" o 在 这 两 


种 情况 下 ， 将 使 用 默认 持续 时 间 和 默认 的 动画 效果 。 

e Object: 如 果 该 值 是 一 个 对 象 ， 那么 effect, delay , duration ,和 easing 可 能 要 提 
ft. 如 果 effect 属性 包含 一 个 jQuery 方法 的 名 称 ， 那么 该 方法 将 被 使 用 ; 否则 它 被 假 
定 为 是 一 个 jQuery UI 的 效果 的 名 称 。 当 使 用 jQuery UI 支持 额外 设置 的 效果 ， 你 可 以 在 
对 象 中 包含 那些 设置 并 且 它 们 将 被 传递 到 的 效果 。 如 果 duration 持续 时 间或 easing 属 
性 被 省 略 ， 那么 默认 值 将 被 使 用 。 如 果 effect RAK, ABA "fadeout" 将 被 使 用 。 如 
果 delay RAR, 那么 将 不 使 用 延迟 。 


Code examples: 
初始 化 带 有 指定 hide 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ hide: { effect: "explode", duration: 1000 } }); 


在 初始 化 后 ， 获 取 或 设置 hide 选项 : 


// getter 
var hide = $( ".selector" ).tooltip( "option", "hide" ); 


// setter 
$( ".selector" ).tooltip( "option", "hide", { effect: "explode", duration: 1000 } ); 


itemsType: Selector 


Default: [title] 


一 个 选择 器 表示 哪些 项 目 应 该 显示 tooltip( 工 具 提 示 框 )。 如 果 您 使 用 其 他 的 东西 自 定义 ， 那 么 
title 属 性 将 作为 tooltip( 工 具 提 示 框 ) 的 内 容 ， 或 者 你 需要 一 个 不 同 的 选择 来 事件 委托 。 


当 改 变 这 个 选项 时 ， 你 可 能 还 需要 改变 的 content 选项 。 
Code examples: 


初始 化 带 有 指定 items 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ items: "img[alt]" }); 


在 初始 化 后 ， 获 取 或 设置 items 选项 : 


// getter 
var items = $( ".selector" ).tooltip( "option", "items" ); 


// setter 
$( ".selector" ).tooltip( "option", "items", "img[alt]" ); 


positionType: Object 


Default: { my: "left top+15", at: "left bottom", collision: "flipfit" } 


确定 tooltip( 工 具 提示 框 ) 相对 于 相关 目标 元 素 的 位 置 。 of 选项 默认 为 目标 元 素 ， 但 您 可 以 
指定 其 他 元 素来 定位 。 有 关 各 个 选项 的 更 多 细节 ， 你 可 以 参考 jQuery UI Position 实 用 工具 。 


Code examples: 


初始 化 带 有 指定 position 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ position: { my: "left+15 center", at: "right center" } 3); 


在 初始 化 后 ， 获 取 或 设置 position 选项 : 
// getter 
var position = $( ".selector" ).tooltip( "option", "position" ); 


// setter 
$( ".selector" ).tooltip( "option", "position", { my: "left+15 center", at: "right center 


[E E —_ # 





showType: Boolean or Number or String or Object 
Default: true tooltip( 工 具 提 示 框 ) 打开 (显示 ) 时 的 动画 效果 。 支 持 多 个 类 型 : 


e Boolean: 当 设 置 为 false ， 将 不 使 用 动画 效果 ， 该 tooltip( 工 具 提示 框 ) 会 立即 被 隐藏 。 
如 果 设 置 为 true, 该 tooltip( 工 具 提 示 框 ) 将 会 以 默认 的 持续 时 间 和 默认 的 效果 淡出 。 

e Number: 该 tooltip( 工 具 提 示 框 ) 将 以 指定 的 时 间 和 默认 的 效果 淡出 。 

e String: 该 tooltip( 工 具 提 示 框 ) 将 使 用 指定 的 效果 被 隐藏 。 该 值 可 以 是 一 个 jQuery 内 置 的 
动画 方法 的 名 称 ， 如 "slideup" ， 或 一 个 jQuery Ul 效果 的 名 称 ， 如 "fola" o 在 这 两 
种 情况 下 ， 将 使 用 默认 持续 时 间 和 默认 的 动画 效果 。 

e Object: 如 果 该 值 是 一 个 对 象 ， 那么 effect, delay , duration , # easing 可 能 要 提 
供 。 如 果 effect 属性 包含 一 个 jQuery 方法 的 名 称 ， 那么 该 方法 将 被 使 用 ; 否则 它 被 假 
定 为 是 一 个 jQuery UI 的 效果 的 名 称 。 当 使 用 jQuery Ul 支持 额外 设置 的 效果 ， 你 可 以 在 
对 象 中 包含 那些 设置 并 且 它 们 将 被 传递 到 的 效果 。 如 果 duration 持续 时 间或 easing [E 
性 被 省 略 ， 那么 默认 值 将 被 使 用 。 如 果 effect MAH, BBA "fadeout" 将 被 使 用 。 如 
果 delay RAM, 那么 将 不 使 用 延迟 。 


Code examples: 


初始 化 带 有 指定 show 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } }); 


在 初始 化 后 ， 获 取 或 设置 show 选项 : 


// getter 
var show = $( ".selector" ).tooltip( "option", "show" ); 


// setter 
$( ".selector" ).tooltip( "option", "show", { effect: "blind", duration: 800 } ); 


tooltipClassType: String 


Default: null 一 个 CSS 样 式 类 名 添加 到 tooltip( 工 具 提示 框 ) 小 部 件 ， 可 用 于 显示 各 种 提示 类 
型 ， 像 警 告 或 错误 。 


这 可 能 会 被 classes option 取 代 。 
Code examples: 


初始 化 带 有 指定 tooltipclass 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ tooltipClass: "custom-tooltip-styling" }); 


在 初始 化 后 ， 获 取 或 设置 tooltipclass 选项 : 
// getter 
var tooltipClass = $( ".selector" ).tooltip( "option", "tooltipClass" ); 


// setter 
$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" ); 


trackType: Boolean 
Default: false tooltip( 工 具 提 示 框 ) 是 否 应 该 跟踪 (RES) 鼠标 。Code examples: 
初始 化 带 有 指定 track 选项 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ track: true }); 


在 初始 化 后 ， 获 取 或 设置 track 选项 : 


// getter 
var track = $( ".selector" ).tooltip( "option", "track" ); 


// setter 
$( ".selector" ).tooltip( "option", "track", true ); 


Methods 


close()Returns: jQuery (plugin only) 


关闭 tooltip( 工 具 提 示 框 ) 。 这 人 入 供 非 委派 的 tooltip( 工 具 提 示 框 ) 调用 。 
。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 close 方法 : 


$( ".selector" ).tooltip( "close" ) 


destroy()Returns: jQuery (plugin only) 

完全 移 除 tooltip( 工 具 提示 框 ) 功能 . 这 将 使 元 素 返 回 到 之 前 的 初始 化 状态 . 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 destroy 方法 : 


$( ".selector" ).tooltip( "destroy" ); 


disable()Returns: jQuery (plugin only) 
禁用 tooltip T RHEE). 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 disable 方法 : 


$( ".selector" ).tooltip( "disable" ); 


enable()Returns: jQuery (plugin only) 
启用 tooltip( 工 具 提 示 框 )。 

。 该 方法 不 接受 任何 参数 。 
Code examples: 


调用 enable 方法 : 


$( ".selector" ).tooltip( "enable" ); 


open()Returns: jQuery (plugin only) 

以 编程 方式 打开 一 个 tooltip( 工 具 提 示 框 ) 。 这 仅 供 非 委 派 的 tooltip( 工 具 提 示 框 ) 调用 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 open 方法 : 


$( ".selector" ).tooltip( "open" ); 


option( optionName )Returns: Object 
获取 当前 与 指定 的 optionName 关联 的 值 。 

。 optionNameType: String 要 获取 值 的 选项 的 名 称 。 
Code examples: 


调用 该 方法 : 


var isDisabled = $( ".selector" ).tooltip( "option", "disabled" ); 


option()Returns: PlainObject 

获取 一 个 包含 键 / 值 对 的 对 象 ， 键 / 值 对 表示 当前 tooltip( 工 具 提 示 框 ) 选项 哈 希 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 


调用 该 方法 : 


var options = $( ".selector" ).tooltip( "option" ); 


option( optionName, value )Returns: jQuery (plugin only) 
设置 与 指定 的 optionName 关联 的 tooltip( 工 具 提示 框 ) 选项 的 值 。 


e optionNameType: String 要 设置 的 选项 的 名 称 。 
e valueType: Object 要 为 选项 设置 的 值 。 


Code examples: 


调用 该 方法 : 


$( ".selector" ).tooltip( "option", "disabled", true ); 


option( options )Returns: jQuery (plugin only) 
为 tooltip( 工 具 提 示 框 ) 设置 一 个 或 多 个 选项 。 
e optionsType: Object 要 设置 的 option-value 对 。 
Code examples: 
调用 该 方法 : 


$( ".selector" ).tooltip( "option", { disabled: true } ); 


widget()Returns: jQuery 

返回 一 个 包含 AER EHÉUSR 的 jquery 对 象 。 
。 该 方法 不 接受 任何 参数 。 

Code examples: 

调用 widget 方法 : 


var widget = $( ".selector" ).tooltip( "widget" ); 


Events 


close( event, ui )Type: tooltipclose 


4 tooltip( 工 具 提 示 框 ) 关闭 时 触发 ， 触 发 事件 为 focusout 或 mouseleave o 


e eventType: Event 
e uiType: Object 
o tooltipType: jQuery 生成 tooltip( 工 具 提示 框 ) 的 元 素 。 


Code examples: 


初始 化 带 有 指定 close 回调 的 tooltip( 工 具 提 示 框 ) : 


$( ".selector" ).tooltip({ 
close: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 tooltipclose 事件 : 


$( ".selector" ) .on( "tooltipclose", function( event, ui ) {} ); 


create( event, ui )Type: tooltipcreate 


在 创建 tooltip( 工 具 提 示 框 ) 时 触发 该 事件 。 


e eventType: Event 
e uiType: Object 


注意 : ui 对 象 是 空 的 ， 这 里 包含 它 是 为 了 与 其 他 事件 保持 一 致 性 。 
Code examples: 


初始 化 带 有 指定 create 回调 的 tooltip( 工 具 提 示 框 ) : 


$( ".selector" ).tooltip({ 
create: function( event, ui ) (3 


3 


绑 定 一 个 事件 监听 器 到 tooltipcreate 事件 : 


$( ".selector" ).on( "tooltipcreate", function( event, ui ) {} ); 


open( event, ui )Type: tooltipopen 
当 tooltip( 工 具 提 示 框 ) 打 开 ， 显 示 时 ， 触 发 此 事件 ， 触 发 的 事件 为 focusin 或 mouseover o 


e eventType: Event 
e uiType: Object 
o tooltipType: jQuery 生成 tooltip( 工 具 提示 框 ) 的 元 素 。 


Code examples: 


初始 化 带 有 指定 open 回调 的 tooltip( 工 具 提示 框 ) : 


$( ".selector" ).tooltip({ 
open: function( event, ui ) {} 


3); 


绑 定 一 个 事件 监听 器 到 tooltipopen 事件 : 


$( ".selector" ).on( "tooltipopen", function( event, ui ) {} ); 


Example: 


带 有 属性 的 所 有 元 素 的 事件 代理 ， 在 文档 上 创建 一 个 工具 提示 框 
Tooltip) 。 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>tooltip demo</title> 
<link rel="stylesheet" href="//code. jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.cs 
«script src="//code.jquery.com/jquery-1.10.2.js"></script> 
«script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 


<p> 
<a href="#" title="Anchor description">Anchor text</a> 
<input title="Input help"> 

</p> 

<script> 
$( document ).tooltip(); 

</script> 


</body> 
</html> 





